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

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

#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;}

<!-- 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="#" 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-->