写个网页要添加图片轮播功能，jquery实现。

写网页==浪费时间

js：

$(document).ready(function(){
	$(".roll a:first").addClass("active");//给第一张图片设置为active
	var imageWidth=$("#pic").width();//获取宽度 1000px
	var imageSum=$(".roll img").size();//获取图片数量 5
	var imageRollWidth=imageWidth*imageSum;//滚动总长度 5000px
	$(".roll").css({'width':imageRollWidth});
	rotate=function(){
		var triggerID=$active.attr("rel")-1;
		var imageRollPosition=triggerID*imageWidth;
		$(".roll a").removeClass('active');
		$active.addClass('active');
		$(".roll").animate({left:-imageRollPosition},600);
	};
	rotateSwitch=function(){
		play=setInterval(function(){
			$active=$('.roll a.active').next();
			if($active.length==0){
				$active=$('.roll a:first');
			}
			rotate();
		},7000);
	};
	rotateSwitch();
});

html：

<div id="pic">
		<div class="roll">
			<a href="#" rel="1"><img src="images/head2.jpg"/></a>
			<a href="#" rel="2"><img src="images/head3.jpg"/></a>
			<a href="#" rel="3"><img src="images/head4.jpg"/></a>
			<a href="#" rel="4"><img src="images/head5.jpg"/></a>
			<a href="#" rel="5"><img src="images/header.jpg"/></a>
		</div>
		<section id="news">
		<span class="more"><a href="#">>></a></span>
		<h2>最新动态</h2>
		<ul>
			<li><a href="#">我校2012年省外艺术类专业课单独考试成</a></li>
			<li><a href="#">我校2012年省外艺术类专业课单独考试成</a></li>
			<li><a href="#">我校2012年省外艺术类专业课单独考试成</a></li>
			<li><a href="#">我校2012年省外艺术类专业课单独考试成</a></li>
			<li><a href="#">我校2012年省外艺术类专业课单独考试成</a></li>
			<li><a href="#">我校2012年省外艺术类专业课单独考试成</a></li>
		</ul>
		</section>
	</div>

转载请注明：于哲的博客 » JS图片轮播