编程学习资讯网

分别用jquery和vue实现轮播图--编程学习网

发布时间:2018-03-15 09:08:13   来源:本站编辑   浏览次数:

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

编程学习网 http://www.javalearns.cn

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java