let oSlick = { dom: null, isMobile: false, slickInited: false, barInterval:null, currentSlide:0, lastCurrent:-1, init: function () { let self = this if (!this.slickInited) { console.time('oSlick') let sWinWidth = $(window).width() if(sWinWidth<=750){ $("#slick_dom").draggable("destory"); let jSlick = this.dom = $("#slick_dom") let banner = $('.banner_img') jSlick .find('.pc') .remove() if(banner.length>1){ if (jSlick.length <= 0) return false this.slickInited = true this.bind() } }else{ let jSlick = this.dom = $("#slick_dom") // let _this = this // jSlick.click(function(){ // _this.bind() // }); jSlick .find('.mobile') .remove() if (jSlick.length <= 0) return false this.slickInited = true this.bind() // setInterval( function(){ // if(self.lastCurrent ===self.currentSlide){ // jSlick.slick('slickPlay'); // // jSlick.slick('slickGoTo', self.currentSlide+1); // // jSlick.on('afterChange', function(event, slick, currentSlide, nextSlide){ // // self.currentSlide = currentSlide // // // console.log(event, slick, currentSlide, nextSlide) // // // var elSlide = $(slick.$slides[currentSlide]); // // // var dataIndex = elSlide.data('index'); // // }); // } // self.lastCurrent = self.currentSlide // console.log(self.currentSlide) // }, 6000); } console.timeEnd('oSlick') } }, bind: function () { let self = this, jSlick = self.dom if($('.slick-initialized').length > 0){ return false; } //新版gallery:http://kenwheeler.github.io/slick/ jSlick.slick({ dots: true, autoplay: true, autoplaySpeed: 8000, infinite: true, slidesToShow: 1, slidesToScroll: 1, pauseOnHover: false, arrows:true, draggable:true, customPaging: function (slider, i) { let bar = $(`<div class="bar_${i}"></div>`) this.barInterval = setInterval(function () { if (slider.currentSlide === i) { bar.addClass("rotation") } if (slider.currentSlide !== i) { bar.removeClass("rotation"); } }, 1); return bar }, onAfterChange: function(){ var currentSlide = jSlick.slick('slickCurrentSlide'); console.log("11111",currentSlide) } }); jSlick.on('afterChange', function(event, slick, currentSlide, nextSlide){ setInterval( function(){ if(currentSlide !== self.currentSlide){ return } jSlick.slick("slickNext") }, 8200); self.currentSlide = currentSlide // console.log(event, slick, currentSlide, nextSlide) // var elSlide = $(slick.$slides[currentSlide]); // var dataIndex = elSlide.data('index'); }); self.arrowShow() // jSlick.slick("slickSetOption", "autoplay", true,true); }, arrowShow: function () { let self = this, jSlick = self.dom, iSlickW = jSlick.width() jSlick .mousemove(function (event) { let iX = event.pageX if (iX < iSlickW / 3) { jSlick .addClass('show_arrow_left') .removeClass('show_arrow_right') } else if (iX > (iSlickW * 2) / 3) { jSlick .addClass('show_arrow_right') .removeClass('show_arrow_left') } else { jSlick.removeClass('show_arrow_left show_arrow_right') } }) .mouseleave(function () { jSlick.removeClass('show_arrow_left show_arrow_right') }) }, destroy: function () { this.slickInited = false clearInterval(this.barInterval) let sWinWidth = $(window).width() if(sWinWidth<=750){ let banner = $('.banner_img') if(banner.length>1){ this.dom && this.dom.slick && this.dom .slick('unslick') .off('mousemove mouseleave') } } } }