let oSlick = {
dom: null,
isMobile: false,
slickInited: false,
barInterval:null,
currentSlide:,
lastCurrent:-,
init: function () {
let self = this
if (!this.slickInited) {
console.time('oSlick')
let sWinWidth = $(window).width()
if(sWinWidth<=){
$("#slick_dom").draggable("destory");
let jSlick = this.dom = $("#slick_dom")
let banner = $('.banner_img') jSlick
.find('.pc')
.remove() if(banner.length>){
if (jSlick.length <= ) 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 <= ) 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 > ){
return false;
} //新版gallery:http://kenwheeler.github.io/slick/
jSlick.slick({
dots: true,
autoplay: true,
autoplaySpeed: ,
infinite: true,
slidesToShow: ,
slidesToScroll: ,
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");
}
}, );
return bar
},
onAfterChange: function(){
var currentSlide = jSlick.slick('slickCurrentSlide');
console.log("",currentSlide)
}
}); jSlick.on('afterChange', function(event, slick, currentSlide, nextSlide){
setInterval( function(){
if(currentSlide !== self.currentSlide){
return
}
jSlick.slick("slickNext")
}, );
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 / ) {
jSlick
.addClass('show_arrow_left')
.removeClass('show_arrow_right')
} else if (iX > (iSlickW * ) / ) {
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<=){
let banner = $('.banner_img')
if(banner.length>){
this.dom && this.dom.slick &&
this.dom
.slick('unslick')
.off('mousemove mouseleave') }
}
}
}

slick轮播图使用大全的更多相关文章

  1. react轮播图----react-slick

    1.安装 npm install react-slick; //安装样式 npm install slick carousel; 再在App.css中引入 @import "~slick-c ...

  2. jquery版本轮播图(es5版本,兼容高)

    优势:基于es5,兼容高.切换动画css配置,轻量,不包含多余代码,可扩展性很高,多个轮播图不会冲突,可配置独有namespace 注: 1.项目需要所写,所以只写了页码的切换,未写上一页下一页按钮, ...

  3. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  4. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  5. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  6. CSS-用伪类制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  7. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  8. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  9. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

随机推荐

  1. C# Hook 方法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  2. 索尼A6300

    1. 开机提示的NTSC NTSC和PAL,是两种不同视频录制标准,也就是说拍摄视频的时候才有用. a6300 1080P下,最大可以以 每秒 120p(ntsc下)或者 100p(pal下)录制.播 ...

  3. 深度学习之美(张玉宏)——第四章 人生苦短我用python

    1 函数参数 (1)收集参数:以一个星号*加上形参名的方式,表示这个函数的实参个数不定,可能0个可能n个. def varParaFun(name,*param): print('位置参数是:',na ...

  4. 普通项目——>maven项目——>SSM(一)

    首先应该明白,SSM是什么? SSM指的是Spring+SpringMVC+MyBatis Spring Spring就像是整个项目中装配bean的大工厂,在配置文件中可以指定使用特定的参数去调用实体 ...

  5. Java创建二叉树

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/yeweiouyang/article/details/37814461 二叉树的值保存在数组中,以0 ...

  6. ExtensionlessUrlHandler-Integrated-4.0

    window 10 锁定webconfig解决方案 解决办法:  出现这个错误是因为 IIS 7 采用了更安全的 web.config 管理机制,默认情况下会锁住配置项不允许更改.要取消锁定可以以管理 ...

  7. vuex实现数据共享

    1.store.js结构 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Sto ...

  8. Python 通过dmidecode获取Linux服务器硬件信息

    通过 dmidecode 命令可以获取到 Linux 系统的包括 BIOS. CPU.内存等系统的硬件信息,这里使用 python 代码来通过调用 dmidecode 命令来获取 Linux 必要的系 ...

  9. Huawei交换机路由器远程Telnet配置

    <huawei>system-view Enter system view, return user view with Ctrl+Z.[huawei]interface g0/0/0[h ...

  10. Spring基础08——使用p命名空间

    1.使用p命名空间 为了简化xml配置,越来越多的xml文件采用属性而非子元素配置信息,Spring从2.5版本开始引入了一个新的p命名空间,可以通过<bean>元素属性的方式配置Bean ...