无缝滚动的实现

关于无缝滚动的实现,首先要考虑好图片如何在容器里盛放,搭建好框架之后,在实现动画的时候更容易找出简单的实现动画的逻辑.在这里我采用的办法如下:

    <!--可视区域-->
        <div id="box">
            <!--盛放图片-->
            <div id="content">
                <img src="img/img01.jpg"/>
                <img src="img/img02.jpg"/>
                <img src="img/img03.jpg"/>
                <img src="img/img04.jpg"/>
                <img src="img/img01.jpg"/>
            </div>
        </div>

最外层的div用做可视区域的窗口大小,然后嵌套一个div用来盛放图片,在js中,动画的实现依赖于定位以及循环定时器的使用,因此给父级div和子代div设置定位是必要的,父级设置为相对定位relative, 子代元素设为绝对定位absolute.
整体的结构搭建好之后,就可以在JavaScript当中来实现关键的动画效果了.具体的实现代码如下:

<script type = "javascript">
function rollFun(){
    var box = document.getElementById('box');
    var content = document.getElementById('content');
    var speed = 2; //图片移动速度
    var timer = null;
    //准备工作
    var imgsArray = content.getElementsByTagName('img');
    // 1 计算 content 的宽度
    content.style.width = imgsArray.length*box.offsetWidth + 'px';
    //此处计算一次宽度即可,因为后面鼠标反复移入移出的时候,函数会被反复的调用,若写在定时器里面,则会反复去计算其宽度,没有必要.
    //移动图片的函数
    function move (){
//      setInterval括号里第一个参数就是匿名函数 第二个是时间 这是语法规定
        timer = setInterval(function(){
            content.style.left = content.offsetLeft-speed +'px';
            if (content.offsetLeft <= (imgsArray.length-1)*box.offsetWidth*-1){
                content.style.left = '0px';
            }
        },30);
    }
        move();

        //鼠标移入停止轮播
        box.onmouseover = function(){
            clearInterval(timer);
        }
        //鼠标移除调用函数,使得定时器重新生效
        box.onmouseout = function(){
            move();
        }
}
rollFun();

</script>


在这里有一点需要说明的是,无缝滚动的实现其实是在视觉上对用户的一种"欺骗",因为为了实现 N 张图片的滚动效果,实际上我们在div中放入了 N+1 张图片,其中第一张和最后一张是相同的,这样我们才能够实现预想的张数的图片的滚动.