<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="fk.css" rel="stylesheet" type="text/css" />
<script src="../1.10.2.jquery.min.js"></script>
</head>
<body>
<div id="fk">
<!--img[src=img/$.jpg]*6-->
<img src="img/1.jpg" alt="" style="display: block;"/>
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
<ul>
<li style="background: #A52A2A;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
// 如果使用jQuery,
// 移入事件建议写成mouseenter
// 移出事件建议写成mouseleave
var c=0;
function autorun(){
c++;
c=c==6?0:c;
// 让c号元素显示,兄弟元素隐藏
$("#fk img").eq(c).fadeIn(200).siblings('img').fadeOut(200);
// 让c号li变红,兄弟li变灰色
$("#fk ul li").eq(c).css('background','#a10000').siblings('li').css('background','#ddd');
}
var timer=setInterval(autorun,1000)
$("#fk").mouseenter(function(){
// 清理定时器
clearInterval(timer);
})
$("#fk").mouseleave(function(){
timer=setInterval(autorun,1000)
})
// 给小圆点加鼠标移入事件
$("#fk ul li").mouseenter(function(){
// 获得移入的li的序号
c=$(this).index();
// 让c号元素显示,兄弟元素隐藏
$("#fk img").eq(c).fadeIn(200).siblings('img').fadeOut(200);
// 让c号li变红,兄弟li变灰色
$("#fk ul li").eq(c).css('background','#a10000').siblings('li').css('background','#ddd');
})
</script>
</html>
css代码
*{
margin: 0;
padding: 0;
}
#fk{
1200px;
height: 535px;
position: relative;
border: 4px solid palevioletred;
margin: 0 auto;
}
#fk img{
position: absolute;
left: 0;
top: 0;
display: none;
}
#fk ul{
position: absolute;
left: 528px;
bottom: 23px;
}
#fk ul li{
12px;
height: 12px;
background: #ddd;
list-style: none;
float: left;
margin-right: 8px;
border-radius: 50%;
}