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

jQuery图片轮播效果

2015-11-05 17:26 666 查看

代码实例：<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿手机腾讯网图片轮播效果</title>
<link type="text/css" rel="stylesheet" href="main.css" />
<style>
@charset "utf-8";
* {padding:0;margin:0;border:none;text-decoration:none;list-style:none;overflow:hidden;}
#main{width:960px;height:450px;position:relative;left:50%;margin-left:-480px;margin-top:100px;}
#picbox{width:3840px;height:450px;position:absolute;top:0px;left:0px;}
.pics{width:960px;height:450px;float:left;}
#pic1{background:url(http://3gimg.qq.com/images/3gqq/ad_home.jpg);}
#pic2{background:url(http://3gimg.qq.com/images/3gqq/ad_yuetu.jpg);}
#pic3{background:url(http://3gimg.qq.com/images/3gqq/ad_nba.jpg);}
#pic4{background:url(http://3gimg.qq.com/images/3gqq/ad_stock.jpg);}
</style>
</head>
<body>
<div id="main">
<div id="picbox">
<div id="pic1" class="pics"></div>
<div id="pic2" class="pics"></div>
<div id="pic3" class="pics"></div>
<div id="pic4" class="pics"></div>
</div>
</div>
<script src="http://h.qhimg.com/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var i=0;
var m;
$(document).ready(function(){
setInterval( function autodo(){
i++;
if(i>4){i=1}
doit(i);
},1500);
});
function doit(i){
m = -960*(i-1);
$("#picbox").stop(true, true).animate({"left":m+"px"},500);
}
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航