jquery图片轮播带缩略图

来源：互联网发布：做微商最常用的软件编辑：程序博客网时间：2024/05/22 11:44
（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);
阅读全文
0 0