無縫輪播

• css需要讓圖片或者文本水平排列,overflow:hidden隱藏其他圖片
• 整體圖片向左/右偏移,就會出現不同的照片

        /*設置父容器寬高,隱藏后面的元素*/
        .carousel{
            width: 320px;
            height: 180px;
            overflow: hidden;

        }

        /*特別重要的一步,不管容器有多寬,元素排成一列*/
        .carousel .img-ct{
            width: 1280px;
            overflow: hidden;
        }

輪播示意圖

元素排成一列,設置總寬度

• 但是當我們到最后一張照片時,后面就沒有了,怎么循環輪播呢?
  • 可以clone頭位元素和末尾元素
  • 可以改變dom的順序
• 立刻整體移位,由clone的3,移位到真正的3
  
  clone元素

把css樣式寫好,我們就用jQuery把邏輯寫一下

• 克隆第一個元素

//圖片容器
var $imgCt = $("img-ct")
//獲取圖片的數量
var $imgs = $(".carousel .img-ct>li")
var imgCount = $imgs.length
//圖片的寬度
var imgWidth = $imgs.width()
//把第一個圖片clone到最后
$imgCt.append($imgs.first().clone())

注意有一點區別

jQuery區別

當我門克隆元素完成的時候,需要注意一點的是圖片的總寬度

clone元素跑下面了

//計算父容器總寬度
$imgCt.width((imgCount +2)*imgWidth)

但是我們clone以后第一張圖片往后跑了一格,我們來把它弄回來

//讓用戶看到的是第一張圖片我們就偏移圖片
$imgCt.css({left: -imgWidth})

我們一點點的寫,下面就是寫兩個函數,一個往左點擊偏移,一個往右點擊偏移

//函數展示上一頁
$nextBtn.click(function(){
    playNext()
})
//展示下一頁
$preBtn.click(function(){
    playPre()
})
//點擊下一頁圖片往左偏移
function playNext(){
    $imgCt.animate({
        //原來基礎上在減小寬度
        left: "-=" +imgWidth
    })
}
function playPre(){
    $imgCt.animate({
        //原來基礎上在減小寬度
        left: "+=" +imgWidth
    })
}

但是有出先了一個問題,當我一直往一邊點擊時,當圖片偏移完了.結果出現了空白,該怎么解決呢?我們需要讓點擊到最后一張圖片時,立即回到第一張,循環,該怎么做呢?

//把上面的函數改一下
var pageIndex = 0
//點擊下一頁圖片往左偏移
function playNext(){
    $imgCt.animate({
        //原來基礎上在減小寬度
        left: "-=" +imgWidth
    },function(){
        //點擊一次pageIndex加一次
        pageIndex++
        //如果pageindex的值等于了圖片的數量
        if (pageIndex === imgCount) {
            //pageindex立刻回到第一張圖片
            pageIndex = 0
            //容器初始化值為圖片寬度
            $imgCt.css({left: -imgWidth})
        }
    })
}

打印pageIndex

大家看上面的動圖,會發現,pageIndex,一直在0123循環,因為圖片數量為4,所以判斷當pageIndex為圖片的數量時,使pageindex值返回去做判斷,設置偏移量就可以了

• 那怎么配合下面的選項卡點擊呢?

//把這個函數調用放在左右點擊click事件中
function setBullet(){
    //獲取li,然后移除所有的active,并給下標添加class為actie
    $bullets.removeClass("active").eq(pageIndex).addClass("active")
}

圓點的樣式跟著點擊

• 現在可以寫當點擊下面圓點圖片動畫的函數

//點擊選項卡
$bullets.click(function(){
    // 獲取下標
    var index = $(this).index()
    console.log(index)
    //如果點擊的下標比輪播圖片的下標大
    if (index > pageIndex) {
        //執行next函數,往左偏移,到達對應位置
        playNext(index - pageIndex)
    }else if (index < pageIndex) {
        playPre(pageIndex-index)
    }
})

當然還需要修改一下其他函數的參數

• 最后再添加一個定時器,就可以自動輪播了

setInterval(function(){
    playNext(1)
},2000)

我們還可以把代碼優化一下,防止多次重復點擊,

// 變量
var isAnimate = false

//點擊下一頁圖片往左偏移
function playNext(len){
  if(isAnimate) return  // 如果動畫return 掉
  isAnimate = true 
    $imgCt.animate({
        //原來基礎上在減小寬度
        left: "-=" +len*imgWidth
     },function(){
      pageIndex += len
      
      if(pageIndex == imgCount){
        pageIndex = 0
        $imgCt.css({left: -imgWidth})
      }
      setBullet()
      isAnimate = false  // 設為false 關掉
      
    })
}

• 代碼地址
• 預覽地址

漸變輪播

• 預覽地址
  • 如果不能瀏覽,請加載腳本