推荐三个轮播插件(配调用方式及参数地址)

最新推荐文章于 2024-08-15 18:01:46 发布

作泥

最新推荐文章于 2024-08-15 18:01:46 发布

阅读量833

点赞数 2

分类专栏： js效果

本文链接：https://blog.csdn.net/weixin_37787674/article/details/104406813

版权

js效果专栏收录该内容

52 篇文章 2 订阅

订阅专栏

OwlCarousel参数及调用地址◆
https://www.dowebok.com/demo/2014/93/
http://www.jq22.com/demo/OwlCarousel220160223/
https://blog.csdn.net/qq_30527987/article/details/78392709
https://owlcarousel2.github.io/OwlCarousel2/index.html
http://www.htmleaf.com/Demo/201502161388.html 主要看这个

基本用法:

  $('.owl_zhuying').owlCarousel({
        nav: true,
        items:1,
        smartSpeed:1200,
    })
    $('.zheng_prev').on('click',function(){
        $('.owl_zhuying').find('.owl-prev').trigger('click')
    })
    $('.zheng_next').on('click',function(){
     $('.owl_zhuying').find('.owl-next').trigger('click')
     })
     $('.owl_zhuying').on('changed.owl.carousel', function(event) {        
        $('.company_zhuying .bao li').removeClass('cur').eq(event.page.index).addClass('cur')
     })
     $('.company_zhuying .bao li').on('click',function(){
         $('.owl_zhuying').trigger("to.owl.carousel",[$(this).index(),1000,true]);
     })
//进阶用法
;(function($, window, document) {
        $('.zhongdian_lunbo .items .text').hover(function(){
          $(this).find('.pic').trigger('hover')
        })
          function zhongdian_lunbo(elem) {
            var elem = $(elem);
            var lis = $(".list .bd li", elem);
            lis.each(function(i) {
              lis.slice(i * 2, i * 2 + 2).wrapAll("<ul class='ul'></ul>");
            });
            var owl=$(".owl-carousel", elem);
            owl.owlCarousel({
              loop: false,
              nav: true,
              margin:40,
              responsive: {
                0: { items: 1 },
                768: { items: 2 },
              }

            });
          }
          zhongdian_lunbo(".zhongdian_lunbo");
        })(jQuery, window, document);