jQuery圖片無縫滾動效果

admin發表於2018-05-18
jQuery

圖片滾動效果在眾多網站都要應用，尤其是企業或者商城之類的站點，可以有效的進行產品展示，也使網站呈現一種動態的感覺。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
*{ 
  margin:0; 
  padding:0; 
} 
ul,li{list-style:none} 
.main_wrap{ 
  padding:50px; 
  width:1000px; 
  margin:0 auto; 
  background:#f9f9f9; 
} 
.pic_wrap{ 
  margin:0 auto; 
  position:relative; 
  overflow:hidden; 
  padding:10px; 
  width:580px; 
  height:100px; 
  border:1px solid #eee; 
  background:#fff; 
} 
.pic_inner  { 
  position:absolute; 
  overflow:hidden; 
} 
.pic_ul  { 
  float:left; 
  white-space:nowrap; 
  overflow:hidden; 
} 
.pic_ul li  { 
  float:left; 
  margin-left:10px; 
  width:200px; 
  height:100px; 
  display:inline; 
  background-color:green; 
  text-align:center; 
  line-height:100px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  var $s_area=$('.pic_inner'); 
  var $s_li=$('.pic_inner').find('li'); 
  var $c_pic=$('.pic_ul').clone(); 
  var sum_width=($s_li.width()+10)*$s_li.length; 
   
  $s_area.width(sum_width*2); 
  $('.pic_inner').append($c_pic);  
  var i=0; 
  var flag=setInterval(play,10); 
  $("#scrollPic").mouseover(function(){ 
    clearInterval(flag); 
  }) 
  $("#scrollPic").mouseout(function(){ 
    flag=setInterval(play,30) 
  }) 
  function play(){ 
    $s_area.css("left",i); 
    i-=1; 
    if(Math.abs(parseInt($s_area.css("left")))>sum_width){i=0;} 
  } 
}) 
</script> 
</head> 
<body> 
<div class="main_wrap"> 
   <div class="pic_wrap" id="scrollPic"> 
    <div class="pic_inner"> 
       <ul class="pic_ul clearfix"> 
        <li class="green">one</li> 
        <li class="grey">two</li> 
        <li class="blue">three</li> 
        <li class="yellow">four</li> 
      </ul> 
     </div> 
  </div> 
</div> 
</body> 
</html>

以上程式碼實現了圖片無縫滾動效果，當然這裡為了方便演示，這裡使用了因為數字替代了圖片，下面介紹一下實現過程:

實現原理:

ul中的li元素是用來存放圖片，儘管這裡使用文字替代。這裡將ul克隆一份放在之前的ul後面，並且將ul的父元素pic_inner元素寬度設定為兩個ul所佔用的寬度（佔用寬度並不一定就是width值）之和，並且pic_inner採用的是絕對定位，並且絕對定位的參考物件是它的父元素，於是就可以通過不間斷的設定pic_inner元素的left屬性值，就可以實現圖片的滾動的效果了。之所以能夠實現無縫效果，關鍵在於對ul的克隆，這樣當第一個ul滾動的時候，第二個ul能夠很好的接續第一個的滾動，否則將會出現以下狀況:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
*{ 
  margin:0; 
  padding:0; 
} 
ul,li{list-style:none} 
.main_wrap{ 
  padding:50px; 
  width:1000px; 
  margin:0 auto; 
  background:#f9f9f9; 
} 
.pic_wrap{ 
  margin:0 auto; 
  position:relative; 
  overflow:hidden; 
  padding:10px; 
  width:580px; 
  height:100px; 
  border:1px solid #eee; 
  background:#fff; 
} 
.pic_inner { 
  position:absolute; 
  overflow:hidden; 
} 
.pic_ul { 
  float:left; 
  white-space:nowrap; 
  overflow:hidden; 
} 
.pic_ul li { 
  float:left; 
  margin-left:10px; 
  width:200px; 
  height:100px; 
  display:inline; 
  background-color:green; 
  text-align:center; 
  line-height:100px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  var $s_area=$('.pic_inner'); 
  var $s_li=$('.pic_inner').find('li'); 
  var sum_width=($s_li.width()+10)*$s_li.length; 
      
  $s_area.width(sum_width*2); 
  var i=0; 
  var flag=setInterval(play,10); 
     
  function play(){ 
    $s_area.css("left",i); 
    i-=1; 
    if(Math.abs(parseInt($s_area.css("left")))>sum_width){i=0;} 
  } 
     
  $("#scrollPic").mouseover(function(){ 
    clearInterval(flag); 
  }) 
  $("#scrollPic").mouseout(function(){ 
    flag=setInterval(play,30) 
  }) 
}) 
</script> 
</head> 
<body> 
<div class="main_wrap"> 
   <div class="pic_wrap" id="scrollPic"> 
    <div class="pic_inner"> 
       <ul class="pic_ul"> 
        <li>one</li> 
        <li>two</li> 
        <li>three</li> 
        <li>four</li> 
      </ul> 
     </div> 
  </div> 
</div> 
</body> 
</html>

注意:以上編輯器並不能完成演示，請複製到本機測試。

以上程式碼刪除了克隆ul的程式碼，這樣當滾動到一定尺寸之後，後面會出現空白。

程式碼分析:

（1）.$s_area=$('.pic_inner')獲取class屬性值為pic_inner'的元素。

（2）.$s_li=$('.pic_inner').find('li')獲取pic_inner元素的li元素幾何。

（3）.sum_width=($s_li.width()+10)*$s_li.length獲取ul元素所佔用的寬度值。

（4）.$s_area.width(sum_width*2)將ul元素的父元素寬度設定為兩個ul元素所佔用寬度的兩倍。

（5）.var i=0初始化一個變數，供設定left屬性值之用。

（6）.var flag=setInterval(play,10)每隔10毫秒執行一次play函式，並且返回一個唯一的標識值。

（7）.play()函式內部可以通過css()函式設定pic_inner元素的left屬性值，並且沒執行一次此函式，用於設定left值的i值都會減一，然後通過if語句判斷，如果向左滾動的尺寸超過ul的寬度，那麼就會重置pic_inner元素left屬性值。

（8）.$("#scrollPic").mouseover()用於規定當滑鼠放在scrollPic元素的時候，滾動停止，$("#scrollPic").mouseout()規定當滑鼠離開scrollPic元素時候，滾動重新開始。

相關文章