<script type="text/javascript" src="js/jquery.min.js"></script><style type="text/css">*{margin:0;padding:0;}.m-slider{width:600px;margin:0 auto 10px !important;}#slider{width:100%; overflow:hidden;}.m-slider .cnt{position:relative;left:0;width:2000%;}.m-slider .cnt li{float:left;width:5%; height: 450px;overflow: hidden;}.m-slider .cnt img{display:block;width:100%;height:450px;vertical-align:top;}.m-slider .cnt p{margin:10px 0;}.m-slider .icons{text-align:center;color:#000;position: relative; z-index: 999; margin-top: -20px;}.m-slider .icons span{background: #fff; border-radius: 5px;box-shadow: 0 0 2px #b0b0b0 inset; display: inline-block;height: 10px; margin: 0 5px; overflow: hidden;text-indent: -99em; width: 10px;}.m-slider .icons .curr{background:#f80; box-shadow: 0 0 2px #f60 inset}</style><div class="m-slider"><div id="slider"><ul id="m-slider" class="cnt"><li><a href="#1"><img src="images/mofe.jpg" alt="" /></a></li><li><a href="#2"><img src="images/9hll.jpg" alt="" /></a></li><li><a href="#3"><img src="images/p2bb.jpg" alt="" /></a></li><li><a href="#4"><img src="images/3srp.jpg" alt="" /></a></li><li><a href="#1"><img src="images/ft9s.jpg" alt="" /></a></li></ul></div><div id="icons" class="icons"><span class="curr">1</span><span>2</span> <span>3</span> <span>4</span> <span>5</span></div></div><script type="text/javascript">jQuery(document).ready(function($){ var $slider = $('#m-slider'); var $icons = $('#icons'); var $li = $slider.children('li'); var WIDTH = $li.width(); var SIZE = $li.size(); $slider.append($li.first().clone()); //console.log(WIDTH + '-' + SIZE); var ox,mx,ux,sumx,scroll,i=0,bool=false,staut=true; $li.find('a').click(function(){ //阻止輪播元素的默認(rèn)點(diǎn)擊事件  return false; }); $slider.mousedown(function(e){ //鼠標(biāo)左鍵輪播區(qū)域  if(e.target.tagName == 'IMG' && e.button == 0){ //左鍵圖片   staut = true;  //初始化拖拽,狀態(tài)為true,可以觸發(fā)點(diǎn)擊事件   sumx = 0;   //初始化鼠標(biāo)偏移為0   bool = true;   //記錄左鍵狀態(tài)   ox = e.pageX;   //記錄鼠標(biāo)初始坐標(biāo)   scroll = $slider.parent().scrollLeft();   //記錄初始輪播水平滾動(dòng)偏移   e.preventDefault();   //阻止鼠標(biāo)點(diǎn)擊默認(rèn)事件  } }); $slider.mousemove(function(e){ //鼠標(biāo)在輪播區(qū)域移動(dòng)  if(bool){//左鍵狀態(tài)   staut = false;   //已經(jīng)拖拽,狀態(tài)為false,不再觸發(fā)點(diǎn)擊事件   mx = e.pageX;   //記錄鼠標(biāo)實(shí)時(shí)坐標(biāo)   sumx = ox - mx;   //記錄鼠標(biāo)坐標(biāo)偏移   $slider.parent().scrollLeft(scroll+sumx);  } }); $slider.mouseout(function(e){ //鼠標(biāo)離開(kāi)輪播區(qū)域  if(bool){ //左鍵狀態(tài)   staut = true;   //已經(jīng)拖拽,但是離開(kāi)了輪播區(qū)域,   //狀態(tài)為true,可以觸發(fā)點(diǎn)擊事件   bool = false;//釋放左鍵狀態(tài)   sumx > 0 && i < SIZE && i++;//下一個(gè)   sumx < 0 && i > 0 && i--;//上一個(gè)   $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){    if(i == SIZE){     i = 0;     $slider.parent().scrollLeft(0);    }    $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');   });//完成拖拽  } }); $slider.mouseup(function(e){ //鼠標(biāo)釋放,完成click事件  bool = false;  //釋放左鍵狀態(tài)  if(staut && e.button == 0){  //沒(méi)有拖拽或者拖拽失效,且是左鍵,觸發(fā)點(diǎn)擊事件   window.location.href = $(e.target).parent().attr('href');   //觸發(fā)點(diǎn)擊事件  }else if(!staut && e.button == 0){  //成功拖拽,且是左鍵   sumx > 0 && i < SIZE && i++;//下一個(gè)   sumx < 0 && i > 0 && i--;//上一個(gè)   $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){    if(i == SIZE){    //最后一個(gè)     i = 0;     $slider.parent().scrollLeft(0);//歸位    }    $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');   });//完成拖拽  } }); function setSlider(){   i < SIZE && i++;//下一個(gè)   $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){    if(i == SIZE){//最后一個(gè)     i = 0;     $slider.parent().scrollLeft(0);    }    $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');   });//完成拖拽 } var timer = setInterval(function(){  setSlider(); },3000); $slider.hover(function(){  if(timer){   clearInterval(timer);   timer = null;  } },function(){  timer = setInterval(function(){   setSlider();  },3000); }); $(window).resize(function(){  WIDTH = $li.width();  $slider.parent().scrollLeft(i*WIDTH);//歸位  //console.log(WIDTH + '-' + i); });});</script>