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类名控制样色

Vue和SuperSlide做轮播效果

猜你喜欢