<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<style>
* {
margin: 0px;
padding: 0px; /*会将ul中的padding变为0 将前面的小圆点挤入图片下*/
text-align: center;
}
li{
list-style-type: none;
}
.outer{
width: 440px;
height: 220px;
border: 5px dashed chartreuse;
margin: 0 auto;
position: relative;
}
.num{
position: absolute;
left:50%;
margin-left: -75px;
bottom: 5px;
font-size: 0px;
}
.num li{
height: 20px;
width: 20px;
background-color: darkgray;
border-radius: 50%;
vertical-align: center;
line-height: 20px;
display: inline-block;
font-size: 16px;
margin: 5px;
cursor: pointer;
/*float: left;*/
}
.outer .img li{
position: absolute;
top:0px;
left:0px;
float: left;
}
/*.outer .img:after{* 只对float有用/
/*content:'';*/
/*height:0px;*/
/*visibility: hidden;*/
/*display: block;*/
/*clear: both;*/
/*}*/
.button{
position: absolute;
height: 60px;
width: 40px;
background-color: white;
opacity: 0.5;
line-height: 60px;
font-size: 40px;
top:50%;
margin-top: -30px;
font-weight: bold;
display: none;
}
.btn_left{
left:10px;
}
.btn_right{
right:10px;
}
.outer:hover .button{
display: block;
}
.outer .num .current{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li>
<img src="1.jpg">
</li>
<li>
<img src="2.jpg">
</li>
<li>
<img src="3.jpg">
</li>
<li>
<img src="4.jpg">
</li>
<li>
<img src="5.jpg">
</li>
</ul>
<ul class="num">
<li>1</li><!--换行时会出现一个占位符：解决方法：不换行或者font-size：0px-->
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="btn_left button">
<
</div>
<div class="btn_right button">
>
</div>
</div>
</body>
</html>
<script>
<!--$()加载后自执行,同时也是一个私有域-->
$(function(){
i=0;
$(".num li").first().addClass('current');
$(".num li").mouseover(function(){
$(this).addClass("current").siblings().removeClass('current');
var index=$(this).index();
i=index;
$('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
});
//定时器开始
var Id = setInterval(move,1500);
function move() {
i++;
if(i==5)
i=0;
if(i<0)
i=4;
$(".num li").eq(i).addClass("current").siblings().removeClass('current');
$('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
}
//定时器停止 hover相对于mouseover可以出现两个函数，入和出 不需要mouseout
$(".outer").hover(function(){
clearInterval(Id);
},function () {
Id=setInterval(move,1500);
});
$('.btn_left').click(function(){
i=i-2;
move();
});
$('.btn_right').click(function(){
move();
});
});
</script>
