<style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } --> </style> 向右滚动 <div> <div> <div> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> </div> <div></div> </div> </div> <script> <!-- var speed=10; //数字越大速度越慢 var tab=document.getElementByIdx_x("demo"); var tab1=document.getElementByIdx_x("demo1"); var tab2=document.getElementByIdx_x("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab.scrollLeft<=0) tab.scrollLeft+=tab2.offsetWidth else{ tab.scrollLeft--; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script>
最后，如果有人想一个页面有两个滚动图片集，一个往左一个往右，那下面的能用了。我把js都加个i了，还有css
向右滚动
<div> <div> <div> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> <a href="#"><img src="https://www.jb51.net/other/link/Clear_logo.gif" /></a> </div> <div></div> </div> </div> <script> <!-- var speedi=10; //数字越大速度越慢 var tabi=document.getElementByIdx_x("demoi"); var tabi1=document.getElementByIdx_x("demoi1"); var tabi2=document.getElementByIdx_x("demoi2"); tabi2.innerHTML=tabi1.innerHTML; function Marqueei(){ if(tabi.scrollLeft<=0) tabi.scrollLeft+=tabi2.offsetWidth else{ tabi.scrollLeft--; } } var MyMari=setInterval(Marqueei,speedi); tabi.onmouseover=function() {clearInterval(MyMari)}; tabi.onmouseout=function() {MyMari=setInterval(Marqueei,speedi)}; --> </script>
以上这篇JS实现图片的不间断连续滚动的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: