<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>轮播动画</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/demo1.js"></script>
</head>
<body>
<div id="igs">
<div class="ig"><img src="images/1.jpg" /></div>
<div class="ig"><img src="images/2.jpg" /></div>
<div class="ig"><img src="images/3.jpg" /></div>
<div class="ig"><img src="images/4.jpg" /></div>
<div class="ig"><img src="images/5.jpg" /></div>
</div>
<div class="btn btn1"><</div>
<div class="btn btn2">></div>
<ul class="lls">
<li class="ll lb">1</li>
<li class="ll ">2</li>
<li class="ll ">3</li>
<li class="ll ">4</li>
<li class="ll ">5</li>
</ul>
</body>
</html>
——-————————————————————css-----------------------------------------------------------------------------——————————————————————
*{margin:0px;
padding:0px;
}
.ig{position:absolute;
}
.btn{width:60px;
height:90px;
background:rgba(0,0,0,0.5);
color:#fff;
text-align:center;
position:relative;
display:inline-block;
line-height:90px;
font-size:40px;
top:105px;
cursor:pointer;
}
.btn2{left:630px;
}
.lls{position:absolute;
top:250px;
left:280px;
}
.ll{list-style:none;
float:left;
background:#333;
margin-right:10px;
border-radius:50%;
color:#fff;
width:30px;
height:30px;
line-height:30px;
text-align:center;
}
.lb{background:red;
}
————————————————————————javascript——————————————————————————————————
var i=0;
var timer;
$(function()
{
$(".ig").eq(0).show().siblings().hide();
timer=setInterval(function(){
i++;
showtime();
},4000); //4000表示4秒
//当鼠标放上小圆圈时显示对应的图像,并停止播放轮动,这时需要获取对应的索引 用$(this).index()
$(".ll").hover(function(){ //$(".ll").hover(function(){},function())当鼠标移上去时执行第一个function,移开时执行第二个function
i=$(this).index(); //$(this)表示找$(".ll")类对应的当前对象
show();
clearInterval(timer);//清除轮播
},function(){
show();
showtime();
});
$(".btn2").click(function(){
clearInterval(timer);
if(i==5)
{
i=-1;
}
i++;
show();
showtime();
});
$(".btn1").click(function(){
clearInterval(timer);
if(i==0)
{
i=5;
}
i--;
show();
showtime();
});
}
);
function show()
{
$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300); //间隔多长时间,执行一个function()
$(".ll").eq(i).addClass("lb").siblings().removeClass("lb"); //使对应的圆圈背景图片跟着变
}
function showtime()
{
if(i==5)
{
i=0;
}
show();
}
//$(function(){});表示页加载完之后
//$(".ig")找到class=ig的对象,即要显示图片对应的class名
//$(".ig").eq(0).show()表示从索引0开始,既class=ig第一个对象,进行显示
//.siblings().hide()其他图片隐藏
//setInterval(function(){},time);间隔多长时间,执行一个function()事件
//$(".ig").eq(i).show().siblings().hide();
//$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300); fadeIn(300)渐进的时候300秒,渐出的时候0.3秒
//$(".ll").eq(i).addClass("lb").siblings().removeClass("lb"); 使对应的圆圈背景图片跟着变