首页 > 代码库 > 一个自动播放的幻灯片

一个自动播放的幻灯片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Through the Looking-Glass</title>
<style>
*{
 padding:0;
 margin:0;
}
#banner{ 
 width:400px;
 height:300px;
 margin:100px auto;
 position:relative;

}
.pic{
 width:400px;
 height:300px;
 overflow:hidden;
 position:relative;
}
.pic img{
 position:absolute;
 display:none;
}

.pic img.actived{
display:block;
}
.btn{
width:120px;
height:20px;
left:140px;
position:absolute;
bottom:10px;

}

.btn ul li{
list-style-type:none;
width:20px;
height:20px;
border-radius:10px;
background-color:#fff;
margin-left:10px;
margin-right:10px;
float:left;
font-size:15px;
line-height:20px;
font-family:‘Arial‘;
text-align:center;
cursor:pointer;
}

.btn ul li.active{
background-color:#B61B1F;
}

</style>
</head>
<body>
<div id="banner">
 <div class="pic">
  <img class="actived" src="http://www.mamicode.com/fluffy.jpg"/>
  <img src="http://www.mamicode.com/white.jpg"/>
  <img src="http://www.mamicode.com/black.jpg"/>
 </div>

 <div class="btn">
  <ul>
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>

  </ul>
 </div>
</div>
<script
src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var index=0;
$(‘div.btn ul li‘).hover(function(){
var index= $(this).index();
$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
$(‘.pic img‘).eq(index).stop(true).fadeIn("slow").siblings().stop(true).fadeOut("slow");
})
var playme = setInterval(play,1000);

$(‘#banner‘).mouseover(function(){
clearInterval(playme);
}
).mouseout(function(){
playme = setInterval(play,1000);
})
function play(){
 index++;
 index%=3
 $(‘div.btn ul li‘).eq(index).addClass(‘active‘).siblings().removeClass(‘active‘);
 $(‘.pic img‘).eq(index).stop(true).fadeIn("slow").siblings().stop(true).fadeOut("slow");
};

});


</script>
</body>
</html>

一个自动播放的幻灯片