Vue和SuperSlide做轮播效果

人盡茶涼 提交于 2020-04-07 22:04:48

使用这个插件做轮播需要的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类名控制样色
 
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!