一、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的值来切换图片
[前端练习小Demo]分别用jquery和vue实现轮播图
原文地址：https://www.cnblogs.com/wq-study/p/8536902.html