javascript无缝滚动示例

@date:2014-09-13 14:56:00

效果

图片大小均为200*200;

默认向左循环滚动;

鼠标悬浮暂停,鼠标移走继续滚动;

可以在此基础进行扩展。

 

下面是代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        #main{
            width:800px;
            margin:100px auto;
            text-align:center;
        }
        #box{
            width:800px;
            height:200px;
            margin:20px auto;
            position:relative;/*相对于起点*/
            /*background:red;*/
            overflow:hidden;
        }
        ul{
            position:absolute;
            left:0px;
            top:0px;
        }
        ul li{
            list-style:none;
            width:200px;
            height:200px;
            float:left;
            margin:0px 1px;
        }
        #main button{
            padding:10px;
            margin:0px 10px;
            border:0px;
            background:#ddd;
        }
        #main button:hover{
            background:#E9AF16;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="main">
        <h2>无缝滚动</h2>
        <div id="box">
            <ul>
                <li><img src="images/p1.jpg" alt="p1"></li>
                <li><img src="images/p2.jpg" alt="p2"></li>
                <li><img src="images/p3.jpg" alt="p3"></li>
                <li><img src="images/p4.jpg" alt="p4"></li>
            </ul>
        </div>
        <button>向左</button><button>向右</button>
    </div>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
    <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> oBox</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">box</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
    </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> aUl</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">oBox.getElementsByTagName(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">ul</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">)[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">];
    </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> aLi</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">oBox.getElementsByTagName(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">li</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
    </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> speed</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">2</span><span style="background-color: #f5f5f5; color: #000000;">;

    aUl.innerHTML</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">aUl.innerHTML</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">aUl.innerHTML;</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">使li增加一倍</span>

aUl.style.width=aLi[0].offsetWidth*aLi.length+"px";//修改aUl框的宽度,注意单位

    <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> move(){
        </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">向左移动aUl.offsetLeft是负的,我们需要把aUl的一半宽度放置在div右侧</span>
        <span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(aUl.offsetLeft</span><span style="background-color: #f5f5f5; color: #000000;">&lt;-</span><span style="background-color: #f5f5f5; color: #000000;">aUl.offsetWidth</span><span style="background-color: #f5f5f5; color: #000000;">/</span><span style="background-color: #f5f5f5; color: #000000;">2){</span>

aUl.style.left=0+"px";//将ul放回原位
}
//向右移动aUl.offsetLeft是大于0的,我们需要把aUl的一半宽度放置在div左侧
if(aUl.offsetLeft>0){
aUl.style.left
=-aUl.offsetWidth/2+"px";//放置在div左侧,left为负值
}
aUl.style.left
=aUl.offsetLeft-speed+"px";//整体移动ul,右
}

    timer</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">setInterval(move,</span><span style="background-color: #f5f5f5; color: #000000;">30</span><span style="background-color: #f5f5f5; color: #000000;">);

    aUl.onmouseover</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){
        clearInterval(timer);
    }

    aUl.onmouseout</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){
        timer</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">setInterval(move,</span><span style="background-color: #f5f5f5; color: #000000;">30</span><span style="background-color: #f5f5f5; color: #000000;">);
    }

    </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> aBtn</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">document.getElementsByTagName(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">button</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
    aBtn[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">].onmouseover</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){
        speed</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">2</span><span style="background-color: #f5f5f5; color: #000000;">;
    }
    aBtn[</span><span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">].onmouseover</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){
        speed</span><span style="background-color: #f5f5f5; color: #000000;">=-</span><span style="background-color: #f5f5f5; color: #000000;">2</span><span style="background-color: #f5f5f5; color: #000000;">;
    }
</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>

</body>
</html>

 

Build by Loppo 0.6.14