无缝循环滚动图片的JS代码

小小鱼儿小小林

发布于 2020-06-23 16:42:06

12.2K0

发布于 2020-06-23 16:42:06

文章被收录于专栏：灵儿的笔记

无缝循环滚动图片的JS代码，用来展示商品什么的最好了，图片URL可以自行替换，速度也可以自己调试。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无缝滚动</title> 
</head> 
<body> 
<style type="text/css"> 
<!-- 
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
width: 400px; 
} 
#demo img {border: 3px solid #F2F2F2;} 
#indemo {width: 800%;} 
#indemo,#demo1,#demo2{float: left;} 
--> 
</style> 
<div id="demo"> 
<div id="indemo"> 
<div id="demo1"> 
<a href="#"><img src="http://pic.kuaizhan.com/g1/M00/2E/DE/CgpQU1X32OyAR5UoAAAYlXKO6GU3817674/imageView/v1/thumbnail/240x180" border="0" /></a> 
<a href="#"><img src="http://pic.kuaizhan.com/g1/M01/2F/03/wKjmqVX32OyAXwEwAAAbxgA53e85424060/imageView/v1/thumbnail/240x180" border="0" /></a> 
<a href="#"><img src="http://pic.kuaizhan.com/g1/M00/2E/DE/CgpQU1X32OyALIQ-AAAZ-zNszZU9827525/imageView/v1/thumbnail/240x180" border="0" /></a> 
<a href="#"><img src="http://pic.kuaizhan.com/g1/M01/2F/03/wKjmqVX32OyAYynbAAAiWFFwQ8A0132451/imageView/v1/thumbnail/240x180" border="0" /></a> 
<a href="#"><img src="http://pic.kuaizhan.com/g1/M01/2E/DE/CgpQU1X32OyAWQe7AAAc6dqYn6w7590955/imageView/v1/thumbnail/240x180" border="0" /></a> 
<a href="#"><img src="http://pic.kuaizhan.com/g1/M00/2F/03/wKjmqVX32OyABHvJAAAnpfDVmnc5352476/imageView/v1/thumbnail/240x180" border="0" /></a> 
</div> 
<div id="demo2"></div> 
</div> 
</div> 
<script> 
<!-- 
var speed=10; 
var tab=document.getElementById("demo"); 
var tab1=document.getElementById("demo1"); 
var tab2=document.getElementById("demo2"); 
tab2.innerHTML=tab1.innerHTML; 
function Marquee(){ 
if(tab2.offsetWidth-tab.scrollLeft<=0) 
tab.scrollLeft-=tab1.offsetWidth 
else{ 
tab.scrollLeft++; 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.οnmοuseοver=function() {clearInterval(MyMar)}; 
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}; 
--> 
</script> 
</body> 
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/09/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

url