[前端练习小Demo]分别用jquery和vue实现轮播图

Posted 2020-10-26 wq-study

一、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的值来切换图片