很多网站首页都需要用到图片轮播效果，但是用原生js相对来说比较复杂，用jQuery实现效果比较迅速，写个demo分析讲解左右划动轮播图效果，这里有说到解决定时器和点击效果冲突和后面li补小bug两种方法
直接上代码里面有详解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#tm{
width: 750px;
height: 291px;
border: 2px solid darkblue;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#tm .dk{
/*width: 3750px;*/
width: 4500px;
height: 291px;
border: 2px solid darkgreen;
position: absolute;
left: 0;
top: 0;
}
#tm .dk img{
float: left;
}
#tm ul{
position: absolute;
bottom: 0;
right: 0;
}
#tm ul li{
list-style: none;
float: left;
width: 116px;
height: 29px;
line-height: 29px;
text-align: center;
color: white;
font-size: 12px;
font-family: "宋体";
background: black;
opacity: 0.6;
margin-left: 1px;
}
#tm ul li:hover{
/*没下划线*/
/*text-decoration: none;*/
/*有下划线*/
text-decoration: underline;
color: #c00;
}
</style>
<script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 先弄一个大总管变量
var t = 0;
// 让定时器在自动跑的时候,点击是无效的 用一个变量去判断
var k = 2; //用来对应能否点击的状态 1代表不能点击，2代表能点击 (这个可以不写，我看了写这个东西后bug更多)
// 自动轮播 控制自动轮播的函数
function hs(){
t++;
//// ###########(*****)下面的(我删了，想看到02页面里看)可以这样写 最后的小bug,当li opacity变色的时候图片跑到第6个(最后的时候) li的颜色也回到第0个
if (t==5) {
$('#tm ul li').eq(0).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'});
}
if (t==6) {
$('#tm .dk').css({'left':'0px'});
t=1;
}
// 计算大div应该到达的left值
// var y = -750*t;
var y = t*-750;
k=1; // 在函数过程中,在运动之前先变成1 在函数运动过程中 1代表不能点击
$('#tm .dk').animate({'left':y+'px'},300,function(){
k=2;//运动300毫秒完事后 再变成能点击2
});
// 让t号li透明度变0.8,兄弟li透明度变0.6
$('#tm ul li').eq(t).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'});
}
var dsq = setInterval(hs,1000);
var w; //在单击事件前 ，先声明一个变量，用来清除定时器 因为每次点击都会出来一个定时炸弹，快速点击很多次会出现定时炸弹叠加
// 给li加鼠标单击事件
$('#tm ul li').click(function(){
if (k==1) {//当k等于1时，不能点击
return;
}
clearInterval(w);
// (解决定时器和点击效果冲突) 1、当我点击的时候(没有定时器)清理定时器
clearInterval(dsq);
// 解决定时器和点击效果冲突 方法(二) 设一下定时炸弹来控制 （本来是300毫秒的，设置成400毫秒，为防止毫秒数有误差）400毫秒后恢复定时器
w=setTimeout(function(){
dsq = setInterval(hs,1000);
},400)
// 获得当前被点击li的序号
t=$(this).index();
// 计算大div应该到达的lfet值
var left = t*-750;
$('#tm .dk').stop().animate({'left':left+'px'},300);
// stop()消除叠加运动
// $('#tm .dk').stop().animate({'left':left+'px'},300,functon(){
//// 解决定时器和点击效果冲突 方法(一) 2、用回调函数来恢复定时器 可以在执行完前面运动的300毫秒后,再执行回调函数里的内容
// dsq = setInterval(hs,1000);
// });
// 让当前被点击的li透明度变为0.8,兄弟li透明度变为0.6
$(this).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'});
})
})
</script>
</head>
<body>
<div id="tm">
<div class="dk">
<img src="../tu/t01.jpg"/>
<img src="../tu/t02.jpg"/>
<img src="../tu/t03.jpg"/>
<img src="../tu/t04.jpg"/>
<img src="../tu/t05.jpg"/>
<img src="../tu/t01.jpg"/>
</div>
<ul>
<li style="opacity: 0.8;">狂欢一夏</li>
<li>母婴品类日</li>
<li>浪的冒泡</li>
<li>生鲜洒水</li>
<li>买2免1</li>
</ul>
</div>
</body>
</html>
代码效果图片：
原文链接：https://www.qiquanji.com/post/7757.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知