基于Vue的轮播图与基于Jquery的轮播图

最近想搞一搞轮播图，就自己实现了一个，element的Carousel走马灯，饿了吗的vue-swipe以及swiper插件，都是很好的学习对象

• vue

vue的话简单很多，毕竟其封装了动画渲染，轮播图当然需要v-for去渲染，vue提供了 组件来实现列表的渲染

先把代码贴出来吧

这些代码都通俗易懂，其实没什么好说的，也就是功能的实现，以及css的最基本使用，需要值得一提的是，我这边的image采用的是本地图片，放在static目录下，当然使用服务器链接也没问题，li元素的循环应该使用v-show来判断，而不是v-if，具体可以看官网解释，很清晰易懂，用定时器改变 currentIndex 实现轮播

效果：

• jquery

jquery实现当然不方便了，但是它操作dom很方便，动画效果也很赞，so，也可以实现一下，对比上面的vue实现，我这里先贴出html与css的基本结构，当然可以看出来jquery的思路 是放一排，相当于雪碧图

    
    

        

        

        

        

        

    
    
    

    
    

        <
        >
    

现在就可以去用jquery的dom操作去实现轮播的效果，

首先肯定是根据图片数量，将dom全部渲染完毕

for (var j = 0; j < $('.list li').length; j++) {
            $('.dian').append('
');
        }

vue中左右按钮的控制与隐藏

 $('.swipe').hover(function(){
            $('.control').show();
        },function(){
            $('.control').hide();
        });

jquery的轮播，搞了蛮久，在网上看到了解决办法，因为我这样的实现和vue完全不同，滑动效果就是雪碧图不同时间展示的效果实现而已，最后一张图片必须要copy第一张图片，这样才可以实现无缝滑动效果，因为动态动画效果改变图片left元素值，为0时会有问题，因直接将left元素重置为0，再left 一个图片宽度

  var firstimg=$('.list li').first().clone(); //复制第一张图片
        $('.list').append(firstimg).width($('.list li').length*($('.list img').width()));
   timer=setInterval(function(){
            i++;
            if (i==$('.list li').length) {
                i=1;
                $('.list').css({left:0});//保证无缝轮播，设置left值
            }
            //进行下一张图片
            $('.list').stop().animate({left:-i*1024},500);
            //圆点跟着变化
            if (i==$('.list li').length-1) {
           // 这段代码在jquery中很常用，代表着index为0的元素新增class，再将其他不为0的元素全部去除active的class
                $('.dian li').eq(0).addClass('active').siblings().removeClass('active');
            }else{
                $('.dian li').eq(i).addClass('active').siblings().removeClass('active');
            }
        },1000);

鼠标hover 和 左右按钮点击其实也就差不多了，贴一下js全部代码

   $(function(){
     // 类似vue中的currentIndex 
        var i=0;
        var timer=null;
        for (var j = 0; j < $('.list li').length; j++) {
            $('.dian').append('
');
        }
        //默认情况下的第一个圆点为active
        $('.dian li').first().addClass('active');
        $('.swipe').hover(function(){
            $('.control').show();
        },function(){
            $('.control').hide();
        });
        var firstimg=$('.list li').first().clone(); //复制第一张图片 放在最后一个的后面
        $('.list').append(firstimg).width($('.list li').length*($('.list img').width()));
        //轮播
        timer=setInterval(function(){
            i++;
            if (i==$('.list li').length) {
                i=1; // 注意这里i 是为1 承转下面的animate -1024
                $('.list').css({left:0});// 这里必须重置
            }
            $('.list').stop().animate({left:-i*1024},500);
            if (i==$('.list li').length-1) {
                $('.dian li').eq(0).addClass('active').siblings().removeClass('active');
            }else{
                $('.dian li').eq(i).addClass('active').siblings().removeClass('active');
            }
        },1000);
        //鼠标操作
        $('.swipe').hover(function(){
            clearInterval(timer);
        },function(){
            timer=setInterval(function(){
                i++;
                if (i==$('.list li').length) {
                    i=1;
                    $('.list').css({left:0});
                };
                $('.list').stop().animate({left:-i*1024},500);
                if (i==$('.list li').length-1) {
                    $('.dian li').eq(0).addClass('active').siblings().removeClass('active');
                }else{
                    $('.dian li').eq(i).addClass('active').siblings().removeClass('active');
                }
            },1000)
        });
        //left按钮
        $('.prev').click(function(){
            i--;
            if (i==-1) {
                i=$('.list li').length-2;
                $('.list').css({left:-($('.list li').length-1)*1024});
            }
            $('.list').stop().animate({left:-i*1024},500);
            $('.dian li').eq(i).addClass('active').siblings().removeClass('active');
        });
        // right按钮
        $('.next').click(function(){
            i++;
            if (i==$('.list li').length) {
                i=1; 
                $('.list').css({left:0});
            };
            $('.list').stop().animate({left:-i*1024},500);
            if (i==$('.list li').length-1) {
                $('.dian li').eq(0).addClass('active').siblings().removeClass('active');
            }else{
                $('.dian li').eq(i).addClass('active').siblings().removeClass('active');
            };

        });
        //hover圆点
        $('.dian li').mouseover(function(){
            var _index=$(this).index();
            // 这里就是vue中的保持currentIndex
            i = _index;
            $('.list').stop().animate({left:-_index*1024},300);
            $('.dian li').eq(_index).addClass('active').siblings().removeClass('active');
        });

    })

当然，jqeury提供了几种动画的实现，如果你需要上下滑动和淡入淡出，不需要和上面一样那么麻烦，我参考了这篇文章，so，也贴一下实现吧，注意css只需要将注释即可，html不用动，直接就贴一下代码了，不说明了

 

 $(function () {
        var i = 0;
        var timer;
        for (var j = 0; j < $('.list li').length; j++) {
            $('.dian').append('
');
        }
        //默认设置第一张图片显示,其余隐藏
        $('.list li').eq(0).show().siblings('.list li').hide();
        $('.dian li').eq(0).addClass('active').siblings('.dian li').removeClass('active');
        timer = setInterval(showList,2000);
        $('.dian li').hover(function () {
            i = $(this).index();
            clearInterval(timer);
            show();
        },function () {
            timer = setInterval(showList,2000);
        })

        //鼠标点击左侧箭头触发效果
        $('.control.prev').click(function () {
            clearInterval(timer);
            if (i == 0){
                i = 5; //注意此时i的数值
            }
            i --;
            show();
            timer = setInterval(showList,2000);
        })

        //鼠标点击右侧箭头触发效果
        $('.control.next').click(function () {
            clearInterval(timer);
            if (i == 4){
                i = -1; //注意此时i的数值
            }
            i ++;
            show();
        })

    })

    function showList() {
        i++;
        if (i == 5){
            i = 0;
        }
        //用fadeIn()与fadeOut()的淡入淡出，这里你可以实现你想要的动画效果
        $('.list li').eq(i).fadeIn(600).siblings('.list li').fadeOut(600);
        $('.dian li').eq(i).addClass('active').siblings('.dian li').removeClass('active');
    }

    function show() {
        $('.list li').eq(i).fadeIn(600).siblings('.list li').fadeOut(600);
        $('.dian li').eq(i).addClass('active').siblings('.dian li').removeClass('active');
    }

最后搞完会发现，vue的代码量简单更少直观易懂，毕竟封装的好啊。

据说这个原生js封装的很不错，有机会可以看看 先记录一下，地址链接