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

简介: 无缝循环滚动图片的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>
相关文章
|
17天前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
51 15
在 golang 中执行 javascript 代码的方案详解
|
1月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
46 3
原生js炫酷随机抽奖中奖效果代码
|
1月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
29 2
|
21天前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
450 4
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
136 1
|
28天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2
|
25天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0
下一篇
DataWorks