轮播图大家都很熟悉了，以前我们写过的轮播图都是用原生js写的
今天就来说说基于jquery的轮播图
详情请见下方代码及详细注释
HTML结构
这里附上详细的js代码及注释
//给每一个圆点按钮添加index属性，从1开始，对应要轮播的每张图片
for(var k=1;k<=$(‘span’).length;k++){
$(‘span’).eq(k-1).attr(‘index’,k)
}
//
var _index=1
//创建定时器
var dsq
//创建运动函数
run()
function run(){
//创建定时器
dsq=setInterval(function(){
//本次自动轮播思路为启用定时器，每隔一段时间调用点击下一张图片功能的函数
$(’.btn_next’).click()
fn()
},2000)
}
//点击切换下一张图片
$(’.btn_next’).click(function(){
//用jquery的自定义动画实现轮播，首先判断是否在运动中，在则点击无效
//此处的判断十分重要，如不判断，在手动多次点击或在自定义运动函数时间设置过短时轮播到最后会出现bug
if(!$(‘ul’).is(":animated")){
//表示不在运动中
$(‘ul’).animate({
//此处设定的运动条件是每次走完一张
left: ( ′ u l ′ ) . p o s i t i o n ( ) . l e f t − ('ul').position().left- (′ul′).position().left−(‘img’).width(),
},1000,
function(){
//判断是否到达边界
if(parseInt( ( ′ u l ′ ) . p o s i t i o n ( ) . l e f t ) < − ( ('ul').position().left)<-( (′ul′).position().left)<−((‘img’).width()*($(‘img’).length-2))){
//重新返回第一张图片
( ′ u l ′ ) [ 0 ] . s t y l e . l e f t = − ('ul')[0].style.left=- (′ul′)[0].style.left=−(‘img’).width()+“px”
}
})
//判断下方小圆点的位置，使其和图片一样到最后一个过后自动返回第一个
if(_index==6){
_index=1
}else{
_index++
}
}
fn()
})
//点击切换上一张图片
$(’.btn_prev’).click(function(){
if(!$(‘ul’).is(":animated")){
$(‘ul’).animate({
left: ( ′ u l ′ ) . p o s i t i o n ( ) . l e f t + ('ul').position().left+ (′ul′).position().left+(‘img’).width(),
},1000,
function(){
if(parseInt( ( ′ u l ′ ) . p o s i t i o n ( ) . l e f t ) > − ('ul').position().left)>- (′ul′).position().left)>−(‘img’).width()){
console.log( $(‘ul’).position().left)
( ′ u l ′ ) [ 0 ] . s t y l e . l e f t = − ( ('ul')[0].style.left=-( (′ul′)[0].style.left=−((‘img’).width()*($(‘img’).length-2))+“px”
}
})
if(index==1){
_index=6
}else{
_index–
}
}
fn()
})
//添加鼠标移入事件
$(’.box’).hover(
//鼠标移入清楚定时器，图片停止轮播
function(){
clearInterval(dsq)
},
function(){
//鼠标移出,重新调用run(),开启图片轮播
run()
}
)
此处为下方所用的on样式，为展示下方按钮跟随图片一起轮播
//给下方圆点按钮添加函数
function fn(){
for(var i=0;i<$(‘span’).length;i++){
//先清楚每一个圆点按钮上的class名
$(‘span’).eq(i).removeClass(‘on’)
}
//给当前的按钮添加class名
$(‘span’).eq(_index-1).addClass(“on”)
}
//点击圆点切换图片
$(‘span’).click(function(){
//移动ul的位置让当前呈现的图片是点击的圆点按钮所对应的的
( ′ u l ′ ) [ 0 ] . s t y l e . l e f t = − ('ul')[0].style.left=- (′ul′)[0].style.left=−(‘img’).width()*$(this).attr(“index”)+‘px’
//将当前点击按钮的index属性给给_index,调用fn（）使点击时下方圆点按钮也会调到点击位置
_index=$(this).attr(“index”)
fn()
})
by:逆战班鄢由杰
扫一扫
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
