经常用的Jquery图片轮转

1。HTML结构
<div class="main_view">
				<div class="window">
					<div class="image_reel">
						<a href="#"><img src="images/_temp/local/local_js_1.jpg" alt="" width="740" height="350"/></a>
						<a href="#"><img src="images/_temp/local/local_js_1.jpg" alt="" width="740" height="350"/></a>
						<a href="#"><img src="images/_temp/local/local_js_1.jpg" alt="" width="740" height="350"/></a>
						<a href="#"><img src="images/_temp/local/local_js_1.jpg" alt="" width="740" height="350"/></a>
					</div>
				</div>
				<div class="paging">
					<a href="#" rel="1">1</a>
					<a href="#" rel="2">2</a>
					<a href="#" rel="3">3</a>
					<a href="#" rel="4">4</a>
				</div>
</div>

2。CSS样式
/* ===== 本地商城图片轮转 ===== */
.main_view {position: relative;}
.window {height: 350px;width: 740px;overflow: hidden;position: relative;margin-bottom:5px;}
.image_reel {position: absolute;top: 0;left: 0;}
.image_reel img {float: left;}
.paging {position: absolute;top: 310px;left: 0;width: 740px;height: 40px;z-index: 100;text-align:right;line-height: 40px;background: url(../images/local/slider_pic_nav_bg.png) repeat-x 0 0;display: none;}
.paging a {padding: 5px;text-decoration: none;color: #ffffff;margin-right:10px;}
.paging a.active {font-weight: bold;background: #920000;border: 1px solid #610000;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;}
.paging a:hover {font-weight: bold;}

3。Js代码
<script type="text/javascript">
			$(document).ready(function() {
				$(".paging").show();
				$(".paging a:first").addClass("active");
				var imageWidth = $(".window").width();
				var imageSum = $(".image_reel img").size();
				var imageReelWidth = imageWidth * imageSum;
				$(".image_reel").css({
					'width' : imageReelWidth
				});
				var rotate = function() {
					var triggerID = $active.attr("rel") - 1;
					var image_reelPosition = triggerID * imageWidth;
					$(".paging a").removeClass('active');
					$active.addClass('active');
					$(".image_reel").animate({
						left : -image_reelPosition
					}, 500);
				};
				var rotateSwitch = function() {
					play = setInterval(function() {
						$active = $('.paging a.active').next();
						if($active.length === 0) {
							$active = $('.paging a:first');
						}
						rotate();
					}, 3000);
				};
				rotateSwitch();
				$(".image_reel a").hover(function() {
					clearInterval(play);
				}, function() {
					rotateSwitch();
				});
				$(".paging a").click(function() {
					$active = $(this);
					clearInterval(play);
					rotate();
					return false;
				});
			});
</script>