一、jQuery實現輪播圖

效果如下：

首先是HTML部分，代碼如下：

<div class="box">
  <div class="img_list">
    <ul>
      <li class="img1"><a href="#"><img src="http://img2.ph.126.net/ABfTI4ftlXI6fsx0V0m1Ow==/1283807368797424109.jpg" alt=""></a></li>
      <li class="img2"><a href="#"><img src="http://img2.ph.126.net/mdHolUx1t_zV9aT_PLZ_pw==/6597526063984144847.jpg" alt=""></a></li>
      <li class="img3"><a href="#"><img src="http://img2.ph.126.net/koJ11p3-TxCfw4rnYWKaTw==/3262576455153543821.jpg" alt=""></a></li>
      <li class="img4"><a href="#"><img src="http://img2.ph.126.net/KJmPAmozfBTu0HgOt1YCTQ==/2993204902441477019.jpg" alt=""></a></li>
      <li class="img5"><a href="#"><img src="http://img2.ph.126.net/xiw34jbE-10m38OWGR37Gw==/1497165401224217327.jpg" alt=""></a></li>
      <li class="img6"><a href="#"><img src="http://img0.ph.126.net/xX2BkGXli3O_xpGyoWkRUA==/3270739229478149748.jpg" alt=""></a></li>
    </ul>
  </div>

  <div class=button1> 
    <span class="prev"></span>
    <span class="next"></span>
  </div>

  <div class="button2">
    <span class="red"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

</div>

JS代碼分析：

var img_list = ['img1', 'img2', 'img3', 'img4', 'img5', 'img6'];
var index = 0;
var $s = $('.button2 span');
$('.prev').click(function() {
  imgPrev();
})
$('.next').click(function() {
  imgNext();
})
//往左滾動函數
function imgPrev() {
  img_list.unshift(img_list[img_list.length - 1]);  //將圖片數組的最後一項插入到數組首位
  img_list.pop();                                   //同時移除數組的最後一項
  $('li').each(function(i, e) {                     //對於每一個li執行函數，移除當前的class,添加新的class
    $(e).removeClass().addClass(img_list[i]);
  })
  index--;                                          //為了執行show()
  if (index < 0) {
    index = img_list.length;
  }
  show();
}
//往右滾動函數
function imgNext() {
  img_list.push(img_list[0]);                     //將圖片數組的第一項添加到數組尾部
  img_list.shift();                               //同時移除數組的第一項
  $('li').each(function(i, e) {
    $(e).removeClass().addClass(img_list[i])
  })
  index++;
  if (index > img_list.length) {
    index = 0;
  }
  show();
}

function show() {
  $($s).eq(index).addClass('red').siblings().removeClass('red') //使圖片下的--跟著變換顏色
}

$s.each(function() {                          //當點擊圖片下的--的時候指向的切換圖片的函數
  $(this).click(function() {
    var currentIndex = $(this).index();      //獲取點擊的--的index值
    var a = currentIndex - index;            //將上一步獲取的index值和當前圖片的index進行比較，得到差值
    if (a == 0) {
      return;
    } else if (a > 0) {                                                
      var new_list = img_list.splice(0, a); //將當前圖片到目的圖片之間的項提取出來，同時原數組發生改變
      img_list = $.merge(img_list, new_list); //將上一步提取出來的項和改變後的數組進行合併，即將提取出來的項移動到了目標index的後面
      $('li').each(function(i, e) {
        $(e).removeClass().addClass(img_list[i]);
      })
      index=currentIndex;
      show();
    }else if(a<0){
      img_list.reverse();                    //將數組反置重覆上面的操作
      var old_list=img_list.splice(0,-a);
      img_list=$.merge(img_list,old_list);
      img_list.reverse();
      $('li').each(function(i, e) {
        $(e).removeClass().addClass(img_list[i]);
      })
      index=currentIndex;
      show();
    }
  })
})
$(document).on("click",".img1",function(){
      imgPrev();
      return false;                                //阻止預設事件
})
$(document).on("click",".img3",function(){
      imgNext();
      return false;
})
$('.box').mouseover(function(){
      clearInterval(timer);
})
$('.box').mouseleave(function(){
      timer=setInterval(imgNext,2000)
})
timer=setInterval(imgNext,2000);

 二、vue實現輪播圖

效果如下:

 vue輪播圖的基本原理相對簡單，即通過v-show="index===currentIndex"來實現圖片的顯示，通過改變currentIndex的值來切換圖片