JS轮播图

最新推荐文章于 2024-08-27 19:30:26 发布

原创最新推荐文章于 2024-08-27 19:30:26 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php #JS

PHP 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一款基于jQuery的图片轮播插件实现过程，包括自动轮播、手动点击切换及鼠标悬停暂停等功能，并详细展示了核心代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function(){
//获取Ul
var ul = $('.all ul');
var li = $(".all ol li");
//获取所有的ul li
var ili = $(".all ul li");
//获取ul的宽度
var liwidth = $(".all ul li").eq(0).width();
//定义li的当前下标
var _now = 0;
//定义一个空值接收setInterval的值
var timeid = null;
//获取ul下的li
var new_li = $(".all ul li");
//定义_now2（防止下标不会乱）
var _now2 = 0;
//alert(liwidth)
li.click(function(){
//获取当前li
var _this = $(this);
_now = _this.index();
_this.addClass('current').siblings().removeClass();
//获取当前的索引
var new_val = _this.index();
ul.animate({'left':-liwidth*new_val},500);
})
//显示图片的自动轮播
function slider(){
//alert(1)
if(_now == li.size()-1){
//当图片滚动一遍时，需要把第一张图片放在最后一张
new_li.eq(0).css({
'position':'relative',
'left':ul.width(),
})
_now=0;
}else{
_now++;
}
_now2++;
li.eq(_now).addClass('current').siblings().removeClass();
ul.animate({'left':-liwidth*_now2},500,function(){
//当animate运动完成后要去除第一个li的position属性
if(_now==0){
new_li.eq(0).css('position','static')
//同时设置整个ul的左边距为0
ul.css('left','0');
//同时设置_now2的值为0
_now2 = 0;
}
});
}

timeid = setInterval(slider,3000);

//当鼠标放在图片上时停止滚动
$('.all').mouseover(function(){
clearInterval(timeid);
})

//到鼠标离开图片时继续滚动
$('.all').mouseout(function(){
timeid = setInterval(slider,3000);
})
})