1、获得移入的li的序号($(this).index();)存到c这个变量里去如果$(this)写在定时器里,那$(this)指向的就是定时器,所以不能写在这里,先存在上一步一个变量里
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#fk{
width: 1200px;
height: 535px;
border: 2px solid blueviolet;
margin: 50px auto;
position: relative;
}
#fk img{
position: absolute;
top: 0;
left: 0;
display: none;
}
#fk ul{
position: absolute;
bottom: 23px;
left: 548px;
}
#fk ul li{
list-style: none;
width: 12px;
height: 12px;
background: #DDDDDD;
float: left;
margin-right: 8px;
border-radius: 50%;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 设一下大总管变量
var c=0;
function hs(){
c++;
// c=(c==5)?0:c; 三元表达式判断
if (c==5) {
c=0;
}
// 让c号图片显示,兄弟图片隐藏
// 让c号图片显示 show:显示 eq(c):找#fk里面的序号是第c个img标签
// $('#fk img').eq(c).show();
//
//// 找到它的元素兄弟隐藏 siblings:找兄弟 兄弟元素都会被选中，除自已以外没选到 hide:隐藏
// $('#fk img').eq(c).siblings('img').hide();
// 链式操作,精简写法 show（硬显示） hide:隐藏
// $('#fk img').eq(c).show().siblings('img').hide();
// 淡入淡出 fadeIn:渐显 在隐藏时点击慢慢显示出来 fadeOut:渐隐
$('#fk img').eq(c).fadeIn(300).siblings('img').fadeOut(300);
// 让c号li变红
$('#fk ul li').eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'});
}
var dsq = setInterval(hs,1000);
// 移入事件: mouseover ==> mouseenter
// 移出事件: mouseout ==> mouseleave
// 给li加鼠标移入事件
$('#fk ul li').mouseenter(function(){
var xh = $(this);
// 把移进来的函数放在定时炸弹里,让它缓一下(200毫秒)再执行
// 停止定时器
clearInterval(dsq);
tt = setTimeout(function(){
// 获得移入的li的序号($(this).index();) 存到c这个变量里去
// 如果$(this)写在定时器里,那$(this)指向的就是定时器,所以不能写在这里,先存在上一步一个变量里
// c=$(this).index();
c=xh.index();
// jQuery图片动画显示时间会磊加,如果你300毫秒钟移动5次li,那么fadeIn(300)*5, 1500毫秒才能走完图片(延时) 用stop()解决这个问题;
// 让eq(c)元素点进来后停止(stop())还没运动完成的图片,再执行下个动画300毫秒fadeIn(300)
$('#fk img').eq(c).stop().fadeIn(300).siblings('img').stop().fadeOut(300);
$('#fk ul li').eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'});
},200)
})
// 鼠标移出事件
$('#fk ul li').mouseleave(function(){
// 清理定时炸弹200毫秒的那个
clearInterval(tt);
// 恢复定时器
dsq = setInterval(hs,1000);
})
})
</script>
</head>
<body>
<div id="fk">
<img src="https://www.qiquanji.com/data/img/dmj/201903101552188163753008.jpg" alt="" style="display: block;"/>
<img src="https://www.qiquanji.com/data/img/dmj/201903101552188163335544.jpg" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164175308.jpg" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164956825.jpg" alt="" />
<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164532873.jpg" alt="" />
<ul>
<li style="background: #A10000;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
代码效果点上面的（运行代码）来看
原文链接：https://www.qiquanji.com/post/7556.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知