快捷導(dǎo)航

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

更新時間：2014年01月20日 15:37:06 作者：

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

思路：

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

復(fù)制代碼代碼如下:

<!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="images/1.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="images/2.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="images/3.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="images/4.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="images/5.jpg" width="150" height="100"></a></td>
          </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:復(fù)制 demo1-->demo2
var cont = $("#demo1").html();
$("#demo2").html(cont);

//3:創(chuàng)建方法定時執(zhí)行
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>