jQuery實現的多張圖無縫滾動效果【測試可用】

2019-11-20 09:01:31

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現的多張圖無縫滾動效果。分享給大家供大家參考，具體如下：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>slider</title><style>*{  padding: 0;  margin: 0;}li{  list-style-type: none;}body{  margin: 50px;}.wrap{  border: 3px solid #f00;  width: 600px;  height: 200px;  position: relative;  overflow: hidden;}.wrap ul{  overflow: hidden;  position:absolute;  width: 1600px;  left: 0;  top: 0;  _height:1px;}.wrap ul li{  float: left;  width: 200px;}</style></head><body><a href="javascript:;" class="goLeft">向左走</a><a href="javascript:;" class="goRight">向右走</a><div class="wrap">  <ul>    <li><img src="1.jpg" alt=""></li>    <li><img src="2.jpg" alt=""></li>    <li><img src="3.jpg" alt=""></li>    <li><img src="4.jpg" alt=""></li>    <li><img src="5.jpg" alt=""></li>  </ul></div><script src="jquery-1.7.2.min.js"></script><script src="slider.js"></script></body></html>

slider.js

// 如果想要使一個元素運動起來，一般情況下這個元素須要具有position屬性absolute/relative$(function(){  var oul = $('.wrap ul');  var oulHtml = oul.html();  oul.html(oulHtml+oulHtml)  var timeId = null;  var ali = $('.wrap ul li');  var aliWidth = ali.eq(0).width();  var aliSize = ali.size();  var ulWidth = aliWidth*aliSize;  oul.width(ulWidth); //1600px  var speed = 2;  function slider(){    if(speed<0){      if(oul.css('left')==-ulWidth/2+'px'){      oul.css('left',0);      }      oul.css('left','+=-2px');    }    if(speed>0){      if(oul.css('left')=='0px'){      oul.css('left',-ulWidth/2+'px');      }      oul.css('left','+='+speed+'px');    }   }  // setInterval()函數的作用是：每隔一段時間，執行該函數里的代碼   timeId = setInterval(slider,30);  $('.wrap').mouseover(function(){    // clearInterval()函數的作用是用來清除定時器    clearInterval(timeId);  });  $('.wrap').mouseout(function(){    timeId = setInterval(slider,30);  });  $('.goLeft').click(function(){    speed=-2;  });  $('.goRight').click(function(){    speed=2;  });});

效果圖如下：