slick轮播图使用大全
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轮播图使用大全的更多相关文章
- react轮播图----react-slick
1.安装 npm install react-slick; //安装样式 npm install slick carousel; 再在App.css中引入 @import "~slick-c ...
- jquery版本轮播图(es5版本,兼容高)
优势:基于es5,兼容高.切换动画css配置,轻量,不包含多余代码,可扩展性很高,多个轮播图不会冲突,可配置独有namespace 注: 1.项目需要所写,所以只写了页码的切换,未写上一页下一页按钮, ...
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- 实现下来ScrollView放大轮播图
创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...
- ViewPager轮播图
LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...
- CSS-用伪类制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...
- React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
随机推荐
- C# Hook 方法
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...
- 索尼A6300
1. 开机提示的NTSC NTSC和PAL,是两种不同视频录制标准,也就是说拍摄视频的时候才有用. a6300 1080P下,最大可以以 每秒 120p(ntsc下)或者 100p(pal下)录制.播 ...
- 深度学习之美(张玉宏)——第四章 人生苦短我用python
1 函数参数 (1)收集参数:以一个星号*加上形参名的方式,表示这个函数的实参个数不定,可能0个可能n个. def varParaFun(name,*param): print('位置参数是:',na ...
- 普通项目——>maven项目——>SSM(一)
首先应该明白,SSM是什么? SSM指的是Spring+SpringMVC+MyBatis Spring Spring就像是整个项目中装配bean的大工厂,在配置文件中可以指定使用特定的参数去调用实体 ...
- Java创建二叉树
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/yeweiouyang/article/details/37814461 二叉树的值保存在数组中,以0 ...
- ExtensionlessUrlHandler-Integrated-4.0
window 10 锁定webconfig解决方案 解决办法: 出现这个错误是因为 IIS 7 采用了更安全的 web.config 管理机制,默认情况下会锁住配置项不允许更改.要取消锁定可以以管理 ...
- vuex实现数据共享
1.store.js结构 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Sto ...
- Python 通过dmidecode获取Linux服务器硬件信息
通过 dmidecode 命令可以获取到 Linux 系统的包括 BIOS. CPU.内存等系统的硬件信息,这里使用 python 代码来通过调用 dmidecode 命令来获取 Linux 必要的系 ...
- Huawei交换机路由器远程Telnet配置
<huawei>system-view Enter system view, return user view with Ctrl+Z.[huawei]interface g0/0/0[h ...
- Spring基础08——使用p命名空间
1.使用p命名空间 为了简化xml配置,越来越多的xml文件采用属性而非子元素配置信息,Spring从2.5版本开始引入了一个新的p命名空间,可以通过<bean>元素属性的方式配置Bean ...