一个自动播放的幻灯片
Posted xinfang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个自动播放的幻灯片相关的知识，希望对你有一定的参考价值。
<!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="fluffy.jpg"/>
<img src="white.jpg"/>
<img src="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>
以上是关于一个自动播放的幻灯片的主要内容，如果未能解决你的问题，请参考以下文章