轮播图
实现功能
1.自动轮播
2.点击小圆点和箭头实现跳转
3.防止多次点击造成的bug
4.进入进出定时器功能
5.bug修复
6.老铁给个赞呗
其他想法
1.可以试试用stop来实现防点击,但是这里没用
2.delay也能防点击
代码如下
$(function () {
var count=0
var isclick=1
var imgList=$('.imgbox li')
var dotList=$('.dot>ul li')
imgList.eq(0).show().siblings().hide()
dotList.eq(0).addClass('act').siblings().removeClass()
//。。。。。。。。。。time
var timeId=setInterval(function () {
count++
if(count>imgList.length-1){
count=0
}
imgList.eq(count).fadeIn().siblings().fadeOut()
dotList.eq(count).addClass('act').siblings().removeClass()
},1000)
//。。。。。。。。。。。mouseenter
$('.wrapper').mouseenter(function () {
clearInterval(timeId)
})
//。。。。。。。。。。。。mouseleave
$(".wrapper").mouseleave(function () {
timeId=setInterval(fn1,1000)
})
//。。。。。。。。next
$('.next').click(function () {
if(isclick){//。。。。。。。。定时器解决快速点击问题
isclick=0
count++
if(count==imgList.length){
count=0
}
imgList.eq(count).fadeIn().siblings().fadeOut()
dotList.eq(count).addClass('act').siblings().removeClass()
setTimeout(function () {
isclick=1
},1000)
}
})
//。。。。。。。。。。last
$('.last').click(function () {
if(isclick){
isclick=0
count--
if(count==-1){
count=imgList.length-1
}
imgList.eq(count).fadeIn().siblings().fadeOut();
dotList.eq(count).addClass('act').siblings().removeClass()
setTimeout(function () {
isclick=1
},1000)
}
})
//。。。。。。。。。。dot
dotList.click(function () {
count=dotList.index(this)
imgList.eq(count).fadeIn().siblings().fadeOut();
dotList.eq(count).addClass('act').siblings().removeClass()
})
//。。。。。。。。。。。function 封装
function fn1() {
count++
if(count>imgList.length-1){
count=0
}
imgList.eq(count).fadeIn().siblings().fadeOut()
dotList.eq(count).addClass('act').siblings().removeClass()
}
})
//点击事件不要放在定时器里面,会出bug乱跳
//有箭头的时候,注意移入移出的盒子时最外面的盒子,不然会有bug
//jq中ture居然不能用,用1和0代替
页面代码如下
代码不易,来个赞呐