初学者仿着别人的写的一个轮播图
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="jquery-1.12.4.min.js"></script>
<style type="text/css">
img{
height:100%;
100%;
}
.outer{
560px;
height: 380px;
margin:80px auto;
position: relative;
}
.img li{
position: absolute;
/*相对于父级定位，如果父级没有定位往上查找，直到body标签*/
list-style:none;
top: 0px;
left: 0;
}
.number{
position: absolute;
bottom: 20px;
left: 0;
//background-color: yellow;
list-style:none;
left:160px;
}
.number li{
display: inline-block;
18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 12px;
margin-left: 6px;
}
.btn{
position: absolute;
top:50%;
//left: 0;
30px;
height: 60px;
background-color: gray;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.5;
margin-top: -30px;
display: none;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
.outer:hover .btn{
display: block;
}
.number .active{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul class="number">
<!-- <li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li> -->
</ul>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var i=0
//通过jquery自动创建按钮标签
var ima_num=$(".img li").length
for (var k = 0; k <ima_num; k++) {
$(".number").append("<li></li>")
}
$(".number li").eq(0).addClass("active")
//手动轮播
$(".number li").mouseover(function(){
i=$(this).index();
$(this).addClass("active");
$(this).siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(100).siblings().stop().fadeOut(100);
})
//自动轮播
var c=setInterval(go_R,1500);
function go_R(){
if (i==ima_num-1) {
i=-1;
}
i++;
$(".number li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
function go_L(){
if (i==0) {
i=ima_num;
}
i--;
$(".number li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
//jquery--hover方法两个参数
//参数一：当鼠标悬浮在区域里时执行的函数
//参数二：当鼠标离开当前区域时执行的函数
$(".outer").hover(function(){
clearInterval(c);
},function(){
c=setInterval(go_R,1500)
})
//button 加定播
//$(".right").bind("click",go_R)
$(".right").click(go_R);
$(".left").click(go_L);
</script>
</body>
</html>