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

网络编程 2024/11/14 佚名

3 2 1

思路：

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

复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS图片向左滚动</title>
    <style type="text/css">
    img{
     border: none;
    }
    </style>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr>
      <td id="demo1" valign="top" bgcolor="ffffff">
      
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="/UploadFiles/2021-04-02/1.jpg">            <td><a href="#" target="_blank"><img src="images/2.jpg">            <td><a href="#" target="_blank"><img src="/UploadFiles/2021-04-02/3.jpg">            <td><a href="#" target="_blank"><img src="images/4.jpg">            <td><a href="#" target="_blank"><img src="/UploadFiles/2021-04-02/5.jpg">          </tr>
        </table>
      </td>

      <td id="demo2" valign="top">

   </td>

    </tr>
</table>
</div>

//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();

</script>
</body>
</html>

图片无缝滚动,js图片滚动

标签：

图片无缝滚动,js图片滚动

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“可自定义速度的js图片无缝滚动示例分享”

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

暂无“可自定义速度的js图片无缝滚动示例分享”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

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

图片无缝滚动,js图片滚动

js报$ is not a function 的问题的解决方法

文本框文本自动补全效果示例分享

评论“可自定义速度的js图片无缝滚动示例分享”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接