您的位置：首页 > Web前端 > JQuery

自动轮播

2015-10-24 14:12 507 查看

<!doctype html>
<html>
<head>
<title>自动轮播</title>
<meta charset="utf-8">
<style type="text/css">
* {padding:0px; margin:0px;}
.roll {width:580px;height:300px;border:solid 1px #c1c1c1;position:relative;}
.roll_num li.roll_num_hover {background:#dc282b;color:#fff;}
.roll_pic img {width:580px;height:300px;display:none;}
.roll_num {position:relative;top:-25px;margin-right:5px;float:right;z-index:10;}
.roll_num li {list-style:none;float:left;font-size:12px;font-weight:600;width:18px;height:18px;line-height:18px;cursor:pointer;margin:0 3px;text-align:center;color:#dc282b;background:#fff;-moz-border-radius:8px;border-radius:8px;}

</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
</head>
<body>
<div class="roll">
<div class="roll_pic">

<a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-05-22/1751132091.jpg"></a>
<a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-03-26/1504517406.jpg" ></a>
<a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-04-12/1003432197.jpg"></a>
</div>
</div>

<script type="text/javascript">
$(function(){
var num=0;
var imgCount = $(".roll_pic a img").length;
function showImg(){
if( num < imgCount-1){
num++
}else{
num = 0;
};
$(".roll_pic a img").hide();
$(".roll_pic a img:eq("+num+")").show();
}
var timer = setInterval(showImg,1000);
$(".roll_pic a img").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(showImg,1000);
})
})
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端开发 jQuery

相关文章推荐

新的分享

章节导航