关闭

使用jQuery实现图片自动轮播

1021人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
*{margin: 0;padding: 0;}
.clear:after{content: "";height: 0;clear: both;overflow: hidden;display: inline-block;}
.clear{*zoom: 1;}
.content{width: 400px;height: 210px;margin: 20px auto;overflow: hidden;position: relative;}
#div-box{width: 2400px;position: absolute;left: 0;top: 0;}
#div-box>img{width: 400px;height: 210px;float: left;}
#indictor{position: absolute;right: 0px;bottom: 5px;z-index: 1;}
#indictor>button{width: 30px;height: 20px;margin: 0 2px;background-color: #00f;color: #fff;border: none;}
#indictor .active{background-color: #f00;}



</style>
</head>
<body>
<div class="content">
<div id="div-box" class="clear">
<img src="images/1.jpg" alt=""><img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
</div>
<div id="indictor">
<button type="button" class="active">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
</div>
</div>

<script src="../lib/common.js" type="text/javascript"></script>
<script>
$(function(){
var index = 0;
function start_move(){
                $('button').eq(index).addClass('active').siblings().removeClass('active');
                $('div#div-box').css('left',-index*400 + 'px');
                index++;
                if(index == 6){index = 0;}
}
var $timer = setInterval(start_move,1000);
$('button').hover(function(e){
clearInterval($timer);
$(e.currentTarget).addClass('active').siblings().removeClass('active');
index = $(e.currentTarget).index();
$('div#div-box').css('left',-index*400 + 'px');


},function(){
$timer=setInterval(start_move,1000);
});
});
</script>
</body>

</html>


//以上内容配置好jQuery环境,再把图片路径改掉就可以正常实现该功能。当然以上内容仅供参考

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1732次
    • 积分:94
    • 等级:
    • 排名:千里之外
    • 原创:7篇
    • 转载:1篇
    • 译文:0篇
    • 评论:3条
    文章分类
    文章存档
    最新评论