可自定義速度的js圖片無縫滾動示例分享

2024-05-06 15:59:53

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了非常平滑的JS圖片滾動特效代碼，無縫循環，速度可自定義，大家參考使用吧

思路：

一組圖片控制它的滾動條進行滾動且此時對這組圖片進行復制并添加進原圖片組中，現在就有兩組圖片了。你可以想象一下，現在滾動條繼續滾動，原來那組圖片最后一張圖片已經滾至頂端且消失，復制的那組圖片的第一張跟在原圖最后一張圖片后出現，此時你就能感覺到無縫滾動了。

復制代碼代碼如下:

<!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>
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr>
      <td valign="top" bgcolor="ffffff">
      
          <table cellspacing="0" cellpadding="0">
          <tr>
            <td><a href="#" target="_blank"><img src="images/1.jpg"></a></td>
            <td><a href="#" target="_blank"><img src="images/2.jpg"></a></td>
            <td><a href="#" target="_blank"><img src="images/3.jpg"></a></td>
            <td><a href="#" target="_blank"><img src="images/4.jpg"></a></td>
            <td><a href="#" target="_blank"><img src="images/5.jpg"></a></td>
          </tr>
        </table>
      </td>

      <td 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>