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

无缝循环滚动图片的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>

无缝循环滚动图片的JS代码相关推荐

上下左右连续滚动图片的JS代码
向上滚动的JS代码: <div id=demo style="overflow:hidden; width:128px; height:300px;"> <div ...
vue-seamless-scroll无缝循环滚动时二轮图片不渲染
关于使用vue-seamless-scroll实现图片无缝循环滚动时出现第二轮图片需要第一轮图片滚动结束后才能渲染出来的问题. 1.我遇到的问题很清楚,就是图片应该无缝循环滚动,但是必须得等前一轮图片 ...
html不间断滚动图片,不间断循环滚动图片，jsp网页代码
不间断循环滚动图片,jsp网页代码 marquee #marq { width:500px; height:100px; border:1px solid red; overflow:hidden; ...
vue实现循环滚动图片
这篇文章主要为大家详细介绍了vue实现循环滚动图片,多图片轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 <template><div class ...
用鼠标拖动图片的JS代码
代码简介: 用鼠标拖动一个图片移动,就像拖动一个层一样,这是一个JS拖动类代码,你可以无限制的增加图片,代码复用率比较高. 代码内容: View Code <html><HEAD&g ...
js吧html中的图片改为数组图片,巧用数组制作图片切换js代码
巧用数组制作图片切换js代码发布于 2017-07-05 07:15:55 | 104 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Javascript 是一种由 ...
图片轮播php代码下载,jQuery带进度条滚动图片轮播代码
jQuery带进度条滚动图片轮播代码 jQuery带进度条滚动图片轮播代码是一款带左右箭头按钮控制图片滚动轮播,标题和进度条显示效果. $(document).ready(function(e) { ...
网页图片无缝循环滚动html代码
图片循环滚动代码图片无缝滚动代码先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通 ...
ae图片无缝循环滚动_HTML图片滚动
HTML图片无缝滚动鼠标悬停 <!DOCTYPE html> <html> <head><title>无缝滚动</title> </h ...

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

无缝循环滚动图片的JS代码相关推荐

最新文章

热门文章