JavaScript之图片操作6

上一篇写的关于放大镜的，可能在实际开发中用的不是很多，接下来将的图片无缝滚动在实际工作中就是用的比较多的了。

如上图，通过定时器控制图片无缝滚动，当鼠标悬浮时停止滚动，鼠标离开，滚动继续。

主要原理是通过定位实现图片的移动，然后通过定时器实现滚动的效果，即无缝滚动。

首先是基础的结构

<!DOCTYPE html>
<html>
<head>
    <title>无缝滚动</title>
    <style type="text/css">
    *{margin:0;padding:0;}
ul{list-style:none;float:left;}
li{margin: 5px;border:3px double #00a67c;float:left;}
li img{width:150px;float:left;}
#demo{width:800px;overflow: hidden;margin:100px auto;border: 1px solid #999;}
#indemo{width:800%;float:left;}
    </style>
</head>
<body>
<div id="demo">
    <div id="indemo">
        <ul id="demo1">
            <li><img src="img/pic1.jpg"></li>
            <li><img src="img/pic2.jpg"></li>
            <li><img src="img/pic3.jpg"></li>
            <li><img src="img/pic4.jpg"></li>
            <li><img src="img/pic5.jpg"></li>
            <li><img src="img/pic6.jpg"></li>
            <li><img src="img/pic7.jpg"></li>
        </ul>
        <ul id="demo2"></ul>
    </div>
</div>
</body>
</html>

有了基本结构后，就要让图片动起来，为了实现图片的无缝滚动，将存放图片的ul进行复制，放在其后，模拟循环效果。其次，每当图片滚动到复制元素的最后一张图片时，就应该让图片重新回到最开始的状态再继续滚动，这样的话就形成了无缝循环滚动的效果。

<script type="text/javascript">
       window.onload = function(){
    var age = 20;
    var tab = document.getElementById('demo');
    var tab1 = document.getElementById('demo1');
    var tab2 = document.getElementById('demo2');
    tab2.innerHTML = tab1.innerHTML;
 
    function run(){
        //tab1的宽度小于 tab被隐藏的宽度；
        if(tab1.offsetWidth - tab.scrollLeft <=0 ){
            //重置tab被隐藏的宽度
            tab.scrollLeft -= tab1.offsetWidth;
        }else {
            tab.scrollLeft++;
        }
    };
    var mymar = setInterval(run,age);
}
    </script>

最后就是优化了，当鼠标悬浮时停止滚动，鼠标离开后继续滚动。

<script type="text/javascript">
    tab.onmouseover = function(){
        clearInterval(mymar);
    }
    tab.onmouseout = function(){
        mymar = setInterval(run,age);
    }
 </script>

到此，我们就实现了最开始想要的效果了，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>无缝滚动</title>
    <style type="text/css">
    *{margin:0;padding:0;}
ul{list-style:none;float:left;}
li{margin: 5px;border:3px double #00a67c;float:left;}
li img{width:150px;float:left;}
#demo{width:800px;overflow: hidden;margin:100px auto;border: 1px solid #999;}
#indemo{width:800%;float:left;}
    </style>
    
</head>
<body>
<div id="demo">
    <div id="indemo">
        <ul id="demo1">
            <li><img src="img/pic1.jpg"></li>
            <li><img src="img/pic2.jpg"></li>
            <li><img src="img/pic3.jpg"></li>
            <li><img src="img/pic4.jpg"></li>
            <li><img src="img/pic5.jpg"></li>
            <li><img src="img/pic6.jpg"></li>
            <li><img src="img/pic7.jpg"></li>
        </ul>
        <ul id="demo2"></ul>
    </div>
</div>
<script type="text/javascript">
       window.onload = function(){
    var age = 20;
    var tab = document.getElementById('demo');
    var tab1 = document.getElementById('demo1');
    var tab2 = document.getElementById('demo2');
    tab2.innerHTML = tab1.innerHTML;
 
    function run(){
        if(tab1.offsetWidth - tab.scrollLeft <=0 ){
            tab.scrollLeft -= tab1.offsetWidth;
        }else {
            tab.scrollLeft++;
        }
    };
    var mymar = setInterval(run,age);
    tab.onmouseover = function(){
        clearInterval(mymar);
    }
    tab.onmouseout = function(){
        mymar = setInterval(run,age);
    }
}
    </script>
</body>
</html>

完整详细代码链接：点这里

posted on 2018-08-29 21:28 紅葉阅读(247) 评论(0) 编辑收藏举报