前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >无缝循环滚动图片的JS代码

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

作者头像
小小鱼儿小小林
发布2020-06-23 16:42:06
12.2K0
发布2020-06-23 16:42:06
举报
文章被收录于专栏:灵儿的笔记

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

代码语言:javascript
复制
<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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档