原生js javascript实现图片无缝滚动

原生js javascript实现图片无缝滚动,原理很简单,直接上代码!

原生js javascript实现图片无缝滚动

演示地址

CSS样式:

*{margin:0;padding:0;}
ul{list-style:none;float:left;}
a{border:none;outline:none;}
img{border:0;}
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;}

HTML结构:

<div id="demo">
    <div id="indemo">
        <ul id="demo1">
            <li><a href="#"><img src="http://helloweb.wang/e/data/tmp/titlepic/5afe2ac56e5658e16228a0e1835a7b39.jpg"></a></li>
            <li><a href="#"><img src="http://helloweb.wang/e/data/tmp/titlepic/4751482c8dca5f80159eef177a153a28.jpg"></a></li>
            <li><a href="#"><img src="http://helloweb.wang/e/data/tmp/titlepic/2c8338f4e79f58e07c8b9e4112692b88.jpg"></a></li>
            <li><a href="#"><img src="http://helloweb.wang/e/data/tmp/titlepic/8e481909e4cc122b6763d1cc41927c2f.jpg"></a></li>
            <li><a href="#"><img src="http://helloweb.wang/e/data/tmp/titlepic/0d89869cfd94be318033bca4defd7553.jpg"></a></li>
            <li><a href="#"><img src="http://helloweb.wang/e/data/tmp/titlepic/02eedfb53dc9a6dab981c0f7d15dd3ce.jpg"></a></li>
        </ul>
        <ul id="demo2"></ul>
    </div>
</div>

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);
    tab.onmouseover = function(){
        clearInterval(mymar);
    }
    tab.onmouseout = function(){
        mymar = setInterval(run,age);
    }
}



原文链接:HelloWeb前端网 » 原生js javascript实现图片无缝滚动 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享