Vue和SuperSlide做輪播效果

使用這個插件做輪播需要的js應該知道，就是vue.js和jquery.SuperSlide.2.1.1.js

下載地址：

　　vue:https://vuejs.org/js/vue.js 這里直接Ctrl+S保存到電腦某個位置就行了

　　SuperSlide:http://www.superslide2.com/downLoad.html

 

這里比較簡單，就不一一解釋了，直接上代碼，樣式的話自己注意一下哦

首先是HTML代碼

<div class="pageRecommend">
                <div class="recommendList">
                    <div class="hd" style="padding-bottom: 10px">
                        <div class="RecommendTitle fl">為您推薦</div>
                        <ul class="fr" ></ul>
                    </div>
                    <div class="bd">
                        <ul class="picList" >

                            <li v-for="(item,index) in hotList">
                                <a :href="goBookDetail(item.bibrecno)">
                                    <div class="img">
　　　　　　　　　　　　　　　　　　　　　　　<img :src="getImageUrl(item.imageurl)">
　　　　　　　　　　　　　　　　　　　　　 </div>
                                    <div class="cont">
                                        <div class="title">
　　　　　　　　　　　　　　　　　　　　　　　　　　<nobr>{{item.title}}</nobr>
　　　　　　　　　　　　　　　　　　　　　　　　</div>
                                        <div class="author">
　　　　　　　　　　　　　　　　　　　　　　　　　　<nobr>作者: {{item.author}}</nobr>
　　　　　　　　　　　　　　　　　　　　　　　　</div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

這里”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類名控制樣色