(010)无缝滚动 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝滚动</title>
<link href="无缝滚动.css" rel="stylesheet" type="text/css" />
<!--
<script type="text/javascript" src="无缝滚动.js">
</script>
-->

<script type="text/javascript">
    
    window.onload = function() {

        var rollDivNode = document.getElementById("roll");
        var ulNode = document.getElementsByTagName("ul")[0];
        var liNodeArr = ulNode.getElementsByTagName("li");

        var aNodeArr = rollDivNode.getElementsByTagName("a");

        var timer = null;

        // ulNode.offsetWidth = liNodeArr[0] * liNodeArr.length;
        var speed = -3;

        ulNode.innerHTML += ulNode.innerHTML;
        ulNode.style.width = liNodeArr[0].offsetWidth * liNodeArr.length + "px";

        timer = setInterval(function() {

            ulNode.style.left = ulNode.offsetLeft + speed + "px";

            if(ulNode.offsetLeft < -ulNode.offsetWidth/2)
            {
                ulNode.style.left = "0px";
            }
            else
            {
                ulNode.style.left = -ulNode.offsetWidth/2;
            }

        },30);

        aNodeArr[0].onclick = function() {
            speed = -3;
        };

        aNodeArr[1].onclick = function() {
            speed = 3;
        };

        ulNode.onmouseover = function() {
            clearInterval(timer);
        };
        ulNode.onmouseout = function() {

            timer = setInterval(function() {

            ulNode.style.left = ulNode.offsetLeft + speed + "px";

            if(ulNode.offsetLeft < -ulNode.offsetWidth/2)
            {
                ulNode.style.left = "0px";
            }
            else
            {
                ulNode.style.left = -ulNode.offsetWidth/2;
            }

        },30);
        };
    };


</script>

</head>
<body>
<div class="control">
    <label id="chk_pause"><input type="checkbox" checked="checked">间隔停顿</label>
    <select id="pause_time">
        <option value="100">短</option>
        <option value="1000" selected="selected">中</option>
        <option value="3000">长</option>
    </select>

    滚动速度：
    <select id="sel_speed">
        <option value="2">慢</option>
        <option value="5">中</option>
        <option value="10">快</option>
    </select>
</div>

<div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn_left"></a>
    <a href="javascript:void(0);" class="btn_right"></a>
    <div class="wrap">
        <ul>
            <li><a href="http://www.miaov.com/"><img src="images/1.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/2.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/3.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/4.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/1.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/2.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/3.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/4.jpg" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

 

css代码:

 1 * { padding: 0; margin: 0; }
 2 li { list-style: none; }
 3 img { border: 0; }
 4 
 5 .roll { width: 880px; height: 108px; margin: 50px auto 0; position: relative; }
 6 .btn_left { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat -70px -69px; position: absolute; top: 20px; left: 1px; z-index: 1; }
 7 .btn_left:hover { background: url(images/btn.jpg) no-repeat -70px 0; }
 8 .btn_right { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat 1px -69px; position: absolute; top: 20px; right: 0; z-index: 1; }
 9 .btn_right:hover { background: url(images/btn.jpg) no-repeat 1px 0; }
10 .roll .wrap { width: 728px; height: 108px; margin: 0 auto; position: relative; overflow: hidden; }
11 .roll ul { position: absolute; top: 0; left: 0; }
12 .roll li { float: left; width: 182px; height: 108px; text-align: center; }
13 .roll li a:hover { position: relative; top: 2px; }
14 
15 .control { border-bottom: 1px solid #ccc; background: #eee; text-align: center; padding: 20px 0; }

 

posted @ 2013-11-28 23:19  雪中飞雁  阅读(57)  评论(0)    收藏  举报