使用这个插件做轮播需要的js应该知道，就是vue.js和jquery.SuperSlide.2.1.1.js

下载地址：

　　vue: 这里直接Ctrl+S保存到电脑某个位置就行了

　　SuperSlide:

 

这里比较简单，就不一一解释了，直接上代码，样式的话自己注意一下哦

首先是HTML代码

     
                
      
                    
       
                        
        
         为您推荐
        
                        
        
                    
       
                    
       
                        
        
                            
         
                                 
           
             　　　　　　　　　　　　　　　　　　　　　　　
             　　　　　　　　　　　　　　　　　　　　　 
           
 
           
 
            
              　　　　　　　　　　　　　　　　　　　　　　　　　　
             
              { {item.title}}
              　　　　　　　　　　　　　　　　　　　　　　　　
            
 
            
              　　　　　　　　　　　　　　　　　　　　　　　　　　
             
              作者: { {item.author}}
              　　　　　　　　　　　　　　　　　　　　　　　　
            
 
           
                             
                        
        
                    
       
                
      
            
     

这里”fr”是轮播上的点点，效果图如下

 

下面贴vue的代码，我会解释一下

var vm = new Vue({        el: '#shelfApp',        data: {            hotList: [],        },         methods: {            shelfRecommend: function (total) {                var that = this;                $.ajax({                    url:"${ctx}/pc/recommend/queryRecommendList.do",                    type: "get",                    data: {pageSize: total},                    async:true,                    dataType: "json",            　　　　  success: function (shelf) {                        if (shelf != null && shelf.state == 200) {
                                    that.hotList = shelf.result.rows;                                that.$nextTick(function () {                                    $(".recommendList").slide({                                        titCell:".hd ul",                                        mainCell:".bd ul",                                        autoPage:true,                                        effect:"leftLoop",                                        autoPlay:true,                                        vis:5,                                         pnLoop:false                                    });                                });                                return;                                               };                    }               })        　},     }, mounted: function () {

var that = this;     //借阅热搜     that.shelfRecommend10); },

}）

这里对SuperSlide的一些属性解释，相信其他的地方应该难不倒下你们

titCell：导航元素对象（鼠标的触发元素对象），通俗一点就是那些点点

mainCell：切换元素的包裹层对象

autoPage：自动分页，值为（true/false）,不过这里需要结合上面的titCell使用，若为true,则titCell为导航元素的包裹层对象。ps：scroll>1时，记得设置autoPage:true，否则分页错误。 effect:fade：渐显； || top：上滚动；|| left：左滚动；|| topLoop：上循环滚动；|| leftLoop：左循环滚动；|| topMarquee：上无缝循环滚动；|| leftMarquee：左无缝循环滚动；

还有这个属性版本不同使用起来也有点不同，建议看官方文档 autoPlay:自动运行 vis:visible缩写，mainCell的可视范围个数，当实际内容个数少于可视个数的时候，不执行SuperSlide效果。 pnLoop:前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效，同时增加prevStop/nextStop类名控制样色