首页 > 其他 > 详细

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

时间:2019-02-22 18:12:14      阅读:138      评论:0      收藏:0      [点我收藏+]

本次我是使用的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‘
        });

 

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!