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. 封装一个windows转发端口的脚本

    使用方法: 1.打开文本编辑工具如(Notepad++) 2.新建文件 3.注意:修改文本的编码字符集为:gb2312 4.将下面代码 复制入文件 5.保存文件名为:transmit.bat 6.双击 ...

  2. 整理一下go的ci工具

    代码格式化 go fmt fileName.go goimports 自动格式化import goimports -w fileName.go mod 自动更新/删除包 go mod tidy 检查注 ...

  3. redis 锦集

    redis 锦集url:http://blog.csdn.net/lqadam/article/category/7479450 1. redis 排序 2.redis 慢查询.位数组和事务 3.re ...

  4. LeetCode算法题-Most Common Word(Java实现)

    这是悦乐书的第321次更新,第342篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第190题(顺位题号是819).给定一个段落和一组禁止词,返回不在禁止词列表中的最常用词 ...

  5. [Git] 020 stash —— Git 中的”皮姆粒子“

    0. 我准备模拟两种情况 第一种 第二种 情况简析 仓库中的最新版本发现 Bug,需要立即修复 当前在 "dev" 分支中工作到一定程度,尚不能提交,但删之可惜 ps: 在分支中没 ...

  6. HTTP/2 最新漏洞,直指 Kubernetes!

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 在这个数据.应用横行的时代,漏洞的出现早已屡见不鲜.在尚未造成大面积危害之前,我们该如何做好防御措施?或许从过往经常发生漏洞 ...

  7. 高级BASH

    Bash介绍与入门 1,简介 Bash(GNU Bourne-Again Shell)是一个为GNU计划编写的Unix shell,它是许多Linux平台默认使用的shell shell是一个命令解释 ...

  8. Python作图包含type3字体解决方案

    1. 解决方案 matplotlib.rcParams[‘text.usetex’] = True

  9. C# 静态方法调用非静态方法

    转载:http://blog.csdn.net/seattle1215/article/details/6657814 using System; using System.Collections.G ...

  10. selectTree 改造

    需求 把select改为selectTree,后台给的数据也进行了改造,数据里面多了children字段,包裹子集 代码 //import import { Row , Col , Select , ...