jQuery图片轮播效果

最新推荐文章于 2021-05-06 10:17:05 发布

木偶跳舞

最新推荐文章于 2021-05-06 10:17:05 发布

阅读量775

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u013372487/article/details/49665601

版权

jQuery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

代码实例：

<!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>