欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

可自定义速度的js图片无缝滚动示例分享_javascript技巧

程序员文章站 2022-05-21 13:17:25
...
思路:

一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中,现在就有两组图片了。你可以想象一下,现在滚动条继续滚动,原来那组图片最后一张图片已经滚至顶端且消失,复制的那组图片的第一张跟在原图最后一张图片后出现,此时你就能感觉到无缝滚动了。

复制代码 代码如下:





JS图片向左滚动





















可自定义速度的js图片无缝滚动示例分享_javascript技巧 可自定义速度的js图片无缝滚动示例分享_javascript技巧 可自定义速度的js图片无缝滚动示例分享_javascript技巧 可自定义速度的js图片无缝滚动示例分享_javascript技巧 可自定义速度的js图片无缝滚动示例分享_javascript技巧





//0:定速度
var speed = 30;
//1:获取元素 demo demo1 demo2
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
//2:复制 demo1-->demo2
var cont = $("#demo1").html();
$("#demo2").html(cont);


//3:创建方法定时执行
function hello(){
var left = $("#demo").scrollLeft();
if(left >= $("#demo1").width()){
left = 0;
}else{
left++;
}
$("#demo").scrollLeft(left);

setTimeout("hello()",speed);
}
hello();
// 移动demo.scrollLeft();