jquery 轮播实例
<html>
<meta Content-Type="http-equiv" content="text/html;charset=utf8"/>
<style>
/*CSS部分：*/
.div {
border:1px solid #000080;
width:300px;
height:200px;
}
ul li{
margin-right:20px;
padding:5px;
border:1px;
list-style-type:none;
float:left;
}
.a{
background:red;
}
.b{
background:#FFFF00;
}
</style>
<!--JS部分-->
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
var t = 0;
var n = 0;
var divcount;
$(document).ready(function(){
divcount = $('.div').length; //轮播的div的数量
$('ul li').click(function(){
var i = $(this).text()-1; //当前要显示的div在div序列中的位置
$(this).removeClass();
$(this).siblings().removeClass();
$(this).addClass('b');
$(this).siblings().addClass('a');
n = i;
if(i > divcount -1){ //当前要显示的div的位置大于div的数量
return;
}
var currentVisableDiv =$('.div:visible'); //找到当前可见的div
$(currentVisableDiv).css('display','none'); //隐藏当前可见的元素
$('.div').eq(i).css('display','block'); //显示第i个div元素
})
t = setInterval('lunbo()',4000); //开始自动轮播
$('.div').hover(function(){clearInterval(t)},function(){t = setInterval('lunbo()',4000);}); //鼠标悬浮在div上面时候清除轮播
})
function lunbo(){
n = (n >= divcount -1) ? 0 : ++n; //要显示的div在div序列中的位置大于等于div的数量，则序列回到0，即第一个，否则序列是原来序列加1
$('ul li').eq(n).click(); //触发点击事件。
}
</script>
<!--HTML 部分-->
<div>
<div class="div" style="display:block;background:#00FF00;">DIV1</div>
<div class="div" style="display:none;background:red;">DIV2</div>
<div class="div" style="display:none;background:blue;">DIV3</div>
</div>
<ul>
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
</ul>
</html>
浙公网安备 33010602011771号