史上最炫jQuery图片转播轮盘，可以点击缩略图看大图，代码简洁易懂.....

效果图：

一：建立轮播div容器：

<div id="carouselContainer">
            	<div id="carouselOuter">
                		<div class="left">
                    	<img src="images/left.jpg" >
                        </div>
                        <div id="carouselInner">
                        	<ul id="carouselUL">
                            	<li><img src="images/thumb_calrousel1.jpg" class="carousel" rel="photoModal" alt="thumb_calrousel1.jpg"></li>
                                <li><img src="images/thumb_calrousel2.jpg" class="carousel" rel="photoModal" alt="thumb_calrousel2.jpg"></li>
                                <li><img src="images/thumb_calrousel3.jpg" class="carousel" rel="photoModal" alt="thumb_calrousel3.jpg"></li>
                                <li><img src="images/thumb_calrousel4.jpg" class="carousel" rel="photoModal" alt="thumb_calrousel4.jpg"></li>
                                <li><img src="images/thumb_calrousel5.jpg" class="carousel" rel="photoModal" alt="thumb_calrousel5.jpg"></li>
                                <li><img src="images/thumb_calrousel6.jpg" class="carousel" rel="photoModal" alt="thumb_calrousel6.jpg"></li>
                                <li><img src="images/thumb_calrousel7.jpg" class="carousel" rel="photoModal" alt="thumb_calrousel7.jpg"></li>
                                <li><img src="images/thumb_calrousel8.jpg" class="carousel" rel="photoModal" alt="thumb_calrousel8.jpg"></li>
                                <li><img src="images/thumb_calrousel9.jpg" class="carousel" rel="photoModal" alt="thumb_calrousel9.jpg"></li>
                                <li><img src="images/thumb_calrousel10.jpg" class="carousel" rel="photoModal" alt="thumb_calrousel10.jpg"></li>
                            </ul>
                        </div>
                        <div class="right">
                        <img src="images/right.jpg" >
                   		</div>
                </div>
            
            </div>
           

二：css

#photoModal{ display:none; width:auto; height:auto; background:#FFF; border:20px #FFF solid; position:fixed; top:10%; left:30%; z-index:999; color:#000;}
#modelshade{width:100%; height:100%; background:#000; display:none; position:absolute; top:0px; z-index:0;}
#banner{ width:1000px; height:200px; margin:0 auto; background:#666;}
#carouselContainer{ width:1000px; height:150px; margin:0 auto;}
#carouselOuter{ width:1000px; height:150px; float:left;  background:#000; }
#carouselOuter .left{ float:left; width:40px; margin-top:30px;}
#carouselInner{ float:left; width:860px; overflow:hidden; margin-left:30px;}
#carouselOuter .right{ float:right; width:40px; margin-top:30px;}
#carouselUL{ position:relative; list-style-type:none; left:-350px; width:8000px; padding:10px;}
#carouselUL li{ float:left; margin-left:10px; width:160px; height:130px;}
           

三：jQuery

<!-- carousel satrt-->
	function autoCarousel(){
							
		var itemWidth = $('#carouselUL li').outerWidth()+10;//li值加上margin值就是一个单位的宽度
		var moveFactor = parseInt($('#carouselUL').css('left'))-itemWidth;//ul的left属性运动的目标值
							
		$('#carouselUL').animate({'left':moveFactor},'4000','linear',function(){
			$('#carouselUL li:last').after($('#carouselUL li:first'));//运动后把第一个li移到最后一个li后面
			$('#carouselUL').css('left','-350px');//恢复初始left值
		});
						};
		var moveCarousel = setInterval(autoCarousel,2000);//开始运动
		$('.left,.right,img.carousel').css('opacity','0.5');
		//设置悬停效果
		$('.left,.right,img.carousel').hover(
			function(){
				$(this).animate({opacity:1},'75');
				clearInterval(moveCarousel);
			},
			function(){
				$(this).animate({opacity:0.5},'250');
				moveCarousel = setInterval(autoCarousel,2000);
			}
		);
		//左右按钮点击事件
		$('.right').bind('click',function(){
			var itemWidth = $('#carouselUL li').outerWidth()+10;
			var moveFactor = parseInt($('#carouselUL').css('left'))-itemWidth;
			$('#carouselUL').animate({'left':moveFactor},'slow','linear',function(){
				$('#carouselUL li:last').after($('#carouselUL li:first'));
				$('#carouselUL').css({'left':'-350px'});
											
			});
									
		});
		$('.left').bind('click',function(){
			var itemWidth = $('#carouselUL li').outerWidth()+10;
			var moveFactor = parseInt($('#carouselUL').css('left'))+itemWidth;
			$('#carouselUL').animate({'left':moveFactor},'slow','linear',function(){
				$('#carouselUL li:first').before($('#carouselUL li:last'));
				$('#carouselUL').css({'left':'-350px'});
											
			});
									
		});
		//放大图片
		$('.carousel').click(function(){
			var photoInfo = $(this).attr('src');//这一个必须是this，不然总匹配第一个li里面的图片的src值			
			var photoPathArr = photoInfo.split('/');
			var photoInfoArr = photoInfo.split('_');
			var photoSrc = photoPathArr[0]+'/'+photoInfoArr[1];
			var photoImgTag = '<img src ="'+photoSrc+'" id="currentPhoto"/>';
			var modalID = $(this).attr('rel');
			$('#'+modalID).html(photoImgTag);
			$('#'+modalID).fadeIn('slow','swing').append('<div class="photoNote"><a href="#" target="_blank" rel="external nofollow"  id="photoClose">close</a></div>');
			var bodyHeight = $('body').height();
			var photoHeight = bodyHeight;
			$('#currentPhoto').css({'height':photoHeight});
			$('body').append('<div id="modelshade"></div>');
			$('#modelshade').css('opacity','0.8').fadeIn(2000);
			$('#photoClose,#modelshade').click(function(){
			$('#modelshade,#photoModal').fadeOut('slow');
			$('.photoNote').remove();
			return false;
		});
		return false;
	});
						
	<!-- carousel end-->