（1）html 标签：
<div class="lb_list"><span class="btn left_btn"></span><div class="large_box"><ul><li><img src="images/img1.jpg" width="530" height="350"></li><li><img src="images/img2.jpg" width="530" height="350"></li><li><img src="images/img3.jpg" width="530" height="350"></li><li><img src="images/img4.jpg" width="530" height="350"></li><li><img src="images/img5.jpg" width="530" height="350"></li><li><img src="images/img6.jpg" width="530" height="350"></li></ul></div><span class="btn right_btn"></span><div class="small_box"><div class="pagenum"><span class="icon"></span><span class="p">1/7</span></div><div class="small_list"><ul><li class="on"><img src="images/thum1.jpg" ><div class="bun_bg"></div></li><li><img src="images/thum2.jpg" ><div class="bun_bg"></div></li><li><img src="images/thum3.jpg"><div class="bun_bg"></div></li><li><img src="images/thum4.jpg"><div class="bun_bg"></div></li><li><img src="images/thum5.jpg"><div class="bun_bg"></div></li><li><img src="images/thum6.jpg"><div class="bun_bg"></div></li><li><img src="images/thum6.jpg"><div class="bun_bg"></div></li></ul></div></div></div>（2）js:
<script src="js/carousel.min.js" type="text/javascript"></script><script type="text/javascript">$(function(){$(".lb_list").thumbnailImg({large_elem: ".large_box",small_elem: ".small_list",left_btn: ".left_btn",right_btn: ".right_btn" });});</script>
(3)carousel.min.js:
(function($){var defaluts={large_elem:"large_elem",small_elem:"small_elem",left_btn:"left_btn",right_btn:"right_btn",state:"on",speed:"normal",vis:4};$.fn.extend({"thumbnailImg":function(options){var opts=$.extend({},defaluts,options);return this.each(function(){var $this=$(this);var t=0;$(opts.large_elem).find("ul li").eq(0).show();$(opts.small_elem).find("ul li").eq(0).addClass(opts.state);var l=$(opts.small_elem).find("ul li").length;var l_mean;if(l<opts.vis){l_mean=0}else{l_mean=((parseInt(l/opts.vis)-1)*opts.vis)+(l%opts.vis)}var w=$(opts.small_elem).find("ul li").outerWidth(true);$(opts.small_elem).find("ul").css("width",l*w+"px");$(opts.small_elem).find("ul li").click(function(){$(this).addClass(opts.state).siblings().removeClass(opts.state);t=$(this).index();Img($(this).index())});$(opts.left_btn).click(function(){var i;$(opts.small_elem).find("ul li").each(function(index){if($(this).hasClass(opts.state)){i=index}});i--;if(i<0){i=l-1}t=i;Img(i)});$(opts.right_btn).click(function(){var i;$(opts.small_elem).find("ul li").each(function(index){if($(this).hasClass(opts.state)){i=index}});i++;if(i>l-1){i=0}t=i;Img(i)});function Img(i){$(opts.large_elem).find("ul li").eq(i).fadeIn().siblings().hide();$(opts.small_elem).find("ul li").eq(i).addClass(opts.state).siblings().removeClass(opts.state);var ml=i*w;if(ml<=l_mean*w){$(opts.small_elem).find("ul").stop().animate({marginLeft:-ml+"px"},opts.speed)}else{$(opts.small_elem).find("ul").stop().animate({marginLeft:-(l_mean*w)+"px"},opts.speed)}}var timing=setInterval(function(){t++;if(t>l-1){t=0}Img(t)},3000);$this.hover(function(){clearInterval(timing)},function(){timing=setInterval(function(){t++;if(t>l-1){t=0}Img(t)},3000)})})}})})(jQuery);
如果觉得《jquery图片轮播带缩略图》对你有帮助，请点赞、收藏，并留下你的观点哦！
