轮播动画小实例
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="in.css">
<script src="../jquery/jquery-2.2.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tuzi.js" type="text/javascript" charset="utf-8" defer></script>
</head>
<body>
<div id="main">
<ul class="image">
<li><a href="#"><img src="ima1.jpg" alt=""></a></li>
<li><a href="#"><img src="ima2.jpg" alt=""></a></li>
<li><a href="#"><img src="ima3.jpg" alt=""></a></li>
<li><a href="#"><img src="ima4.jpg" alt=""></a></li>
<li><a href="#"><img src="ima5.jpg" alt=""></a></li>
</ul>
<ul class="num">
</ul>
<a href="#" class="left btn"><</a>
<a href="#" class="right btn">></a>
</div>
</body>
</html>
--------------------------------------------------------------------分割线看什么看----------------------------------------------------------------------------
in.css
*{
margin: 0;
padding: 0;
}
#main ul,#main li{
list-style-type: none;
}
#main{
width: 730px;
height: 450px;
margin:50px auto;
position: relative;
}
.image img{
position: absolute;
top: 0;
left: 0;
}
.image li{
display: none;
}
#main .num{
width: 100%;
position: absolute;
font-size: 0;
text-align: center;
bottom: 20px;
left: 0;
}
#main .num li{
width: 20px;
height: 20px;
background-color: #666;
color: #fff;
text-align: center;
line-height: 20px;
border-radius: 50%;
display: inline-block;
font-size: 14px;
margin: 0 4px;
cursor: pointer;
}
#main .btn{
background-color: rgba(0, 0, 0, 0.6);
font-size: 55px;
color:#fff;
height: 90px;
line-height: 90px;
position: absolute;
text-align: center;
width: 40px;
top: 50%;
margin-top: -45px;
display: none;
cursor: pointer;
}
#main:hover .btn{
display: block;
}
#main .right{
right: 0;
}
#main .num li.active{
background-color: #F20F0F;
}
#main a{
text-decoration: none;
}
--------------------------------------------------------------------分割线看什么看----------------------------------------------------------------------------
tuzi.js
$(document).ready(function(){
var size=$(".image li").size();
for(var i=1;i<=size;i++){
var li="<li>"+i+"</li>";
$(".num").append(li);
}
//手动控制
$(".image li").eq(0).show();
$(".num li").eq(0).addClass("active");
$(".num li").mouseover(function(){
timeId=setTimeout(function(){
var index=$(this).index();
i=index;
$(".num li").eq(index).addClass("active").siblings().removeClass('active');
$(".image li").eq(index).stop().fadeIn(400).siblings().stop().fadeOut(400);
}.bind(this),300);
}).mouseout(function(event) {
clearTimeout(timeId);
});;
//左右按钮点击事件
$("#main .left").click(function(){moveL();return false;});
$("#main .right").click(function(){move();return false;});
//自动轮播
var i=0;
var t=setInterval(move,6000);
function move(){
i++;
if(i==size){
i=0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass('active');
$(".image li").eq(i).fadeIn(400).siblings().fadeOut(400);
}
function moveL(){
i--;
if(i==-1){
i=size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass('active');
$(".image li").eq(i).fadeIn(400).siblings().fadeOut(400);
}
$("#main").hover(function(){clearInterval(t);},function(){t=setInterval(move,6000);});
});
效果如图：
