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;  });});

效果图如下：