无缝滚动效果

来源：互联网发布：分层网络模型优点编辑：程序博客网时间：2024/06/10 13:15

页面布局通过div,ul,li来构造，如下：

<a href="javascript:;">向左走</a>    <a href="javascript:;">向右走</a>    <div id="div1">        <ul>            <li><img src="img/1.jpg" alt="" width="200"></li>            <li><img src="img/2.jpg" alt="" width="200"></li>            <li><img src="img/3.jpg" alt="" width="200"></li>            <li><img src="img/4.jpg" alt="" width="200"></li>        </ul>    </div>

javascript思路：

1、定时器，使ul不断向左移动，

2、用offsetLeft获得ul移动后左侧的距离

3、当ul移动超出div时候，ul在回到起点，重新移动，

4、加左右按钮，控制滚动方向

解决：

获得DOM，

var oDiv = document.getElementById('div1');            var oUl = document.getElementsByTagName('ul')[0];            var ali = document.getElementsByTagName("li");

1、向左移动，

oUl.style.left = oUl.offsetLeft-20+"px"

2、当ul移动超出div时候，ul回到起点，重新移动，向左移动如下：

if(oUl.offsetLeft < -oUl.offsetWidth/2) {                    oUl.style.left ="0"                }

向右移动的同理可得；

3、向左向右滚动时候，需控制方向，此时声明变量，给定初始值，即将步骤一改为：

oUl.style.left = oUl.offsetLeft+speed+"px"

做出的效果如下所示：

阅读全文

0 0