码迷,mamicode.com
首页 > 其他好文 > 详细

录播图的分页使用进度条形式显示

时间:2019-02-22 18:29:39      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:slides   ade   ==   显示   interval   nbsp   return   scroll   style   

本次我是使用的slick轮播图插件,其官网网址如下:

 http://kenwheeler.github.io/slick/

下面是轮播图中的代码,如果你不知道效果是什么样子,亦可以去看一下阿里云的官网:https://www.aliyun.com/?utm_content=se_1000301881

效果如下:

 技术图片

 

 

 //新版gallery:http://kenwheeler.github.io/slick/
        jSlick.slick({
            dots: true,
            autoplay: true,
            autoplaySpeed: 8000,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            pauseOnHover:false,
            customPaging:function(slider,i){
                let bar =  $(`<div class="bar_${i}"><p class="progress_bar"></p></div>`)
                let pro=0;
                let update=setInterval(function(){
                    if (pro < 50) {
                        pro++;
                    }
                    if (slider.currentSlide !== i) {
                        pro = 0;
                    }
                    bar.width(pro+"px");
                }, 160);
                return bar
            },
            // fade: true,
            // cssEase: ‘linear‘
        });

 

录播图的分页使用进度条形式显示

标签:slides   ade   ==   显示   interval   nbsp   return   scroll   style   

原文地址:https://www.cnblogs.com/kaiqinzhang/p/10419733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!