最全輪播圖---jq

輪播圖

實作功能

1.自動輪播

2.點選小圓點和箭頭實作跳轉

3.防止多次點選造成的bug

4.進入進出定時器功能

5.bug修複

6.老鐵給個贊呗

其他想法

1.可以試試用stop來實作防點選，但是這裡沒用

2.delay也能防點選

代碼如下

$(function () {
    var count=0
    var isclick=1
    var imgList=$('.imgbox li')
    var dotList=$('.dot>ul li')
    imgList.eq(0).show().siblings().hide()
    dotList.eq(0).addClass('act').siblings().removeClass()
     //。。。。。。。。。。time
      var timeId=setInterval(function () {
        count++
        if(count>imgList.length-1){
            count=0
        }
        imgList.eq(count).fadeIn().siblings().fadeOut()
        dotList.eq(count).addClass('act').siblings().removeClass()

      },1000)
      //。。。。。。。。。。。mouseenter
      $('.wrapper').mouseenter(function () {
          clearInterval(timeId)
  })
      //。。。。。。。。。。。。mouseleave
      $(".wrapper").mouseleave(function () {
    timeId=setInterval(fn1,1000)
         })
      //。。。。。。。。next
         $('.next').click(function () {
          if(isclick){//。。。。。。。。定時器解決快速點選問題
            isclick=0
            count++
            if(count==imgList.length){
                count=0
            }
            imgList.eq(count).fadeIn().siblings().fadeOut()
            dotList.eq(count).addClass('act').siblings().removeClass()
            setTimeout(function () {
              isclick=1
              },1000)
          }
          })
     //。。。。。。。。。。last
      $('.last').click(function () {
            if(isclick){
              isclick=0
              count--
          if(count==-1){
              count=imgList.length-1
          }
          imgList.eq(count).fadeIn().siblings().fadeOut();
          dotList.eq(count).addClass('act').siblings().removeClass()
          setTimeout(function () {
            isclick=1
            },1000)
            }
          })
     //。。。。。。。。。。dot 
          dotList.click(function () {
            count=dotList.index(this)
            imgList.eq(count).fadeIn().siblings().fadeOut();
          dotList.eq(count).addClass('act').siblings().removeClass()
            })
    //。。。。。。。。。。。function 封裝
  function fn1() {
    count++
  if(count>imgList.length-1){
      count=0
  }
  imgList.eq(count).fadeIn().siblings().fadeOut()
  dotList.eq(count).addClass('act').siblings().removeClass()
  }
})
//點選事件不要放在定時器裡面，會出bug亂跳
//有箭頭的時候，注意移入移出的盒子時最外面的盒子，不然會有bug
//jq中ture居然不能用，用1和0代替
           

頁面代碼如下

代碼不易，來個贊呐