笔记：jQuery带缩略图轮播效果

<div class="banner">

            <div class="large_box">

                <ul>

                    <li>

                        <img src="images/1.png" width="600" height="350">

                    </li>

                    <li>

                        <img src="images/2.png" width="600" height="350">

                    </li>

                    <li>

                        <img src="images/3.png" width="600" height="350">

                    </li>

                    <li>

                        <img src="images/1.png" width="600" height="350">

                    </li>

                    <li>

                        <img src="images/2.png" width="600" height="350">

                    </li>

                    <li>

                        <img src="images/3.png" width="600" height="350">

                    </li>

                    <li>

                        <img src="images/1.png" width="600" height="350">

                    </li>

                </ul>

            </div>

            <div class="small_box">

                <span class="btns lefts_btn" onclick="left_btn()"></span>

                <div class="small_list">

                    <ul>

                        <li class="on">

                            <img src="images/1.png" width="100" height="50">

                            <div class="bun_bg"></div>

                        </li>

                        <li class="">

                            <img src="images/2.png" width="100" height="50">

                            <div class="bun_bg"></div>

                        </li>

                        <li class="">

                            <img src="images/3.png" width="100" height="50">

                            <div class="bun_bg"></div>

                        </li>

                        <li class="">

                            <img src="images/1.png" width="100" height="50">

                            <div class="bun_bg"></div>

                        </li>

                        <li class="">

                            <img src="images/2.png" width="100" height="50">

                            <div class="bun_bg"></div>

                        </li>

                        <li class="">

                            <img src="images/3.png" width="100" height="50">

                            <div class="bun_bg"></div>

                        </li>

                        <li class="">

                            <img src="images/1.png" width="100" height="50">

                            <div class="bun_bg"></div>

                        </li>

                    </ul>

                </div>

                <span class="btns rights_btn" onclick="right_btn()"></span>

            </div>

        </div>

script部分：

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>

        <script type="text/javascript">

            /* 左按钮 */

            function left_btn(){

                var i;

                var l = $(".small_list").find("ul li").length;

                $(".small_list").find("ul li").each(function(index){

                    if($(this).hasClass("on")){

                        i = index;

                    }

                });

                i--;

                if(i < 0){

                    i = l - 1;

                }

                t = i;

                Img(i)

            };

            /* 右按钮 */

            function right_btn(){

                var i;

                var l = $(".small_list").find("ul li").length;

                $(".small_list").find("ul li").each(function(index){

                    if($(this).hasClass("on")){

                        i = index;

                    }

                });

                i++;

                if(i > l-1){

                    i = 0;

                }

                t = i;

                Img(i);

            };

            /* 图片 */

            function Img(i){

                var l = $(".small_list").find("ul li").length;

                var l_mean;

                if(l < 5){

                    l_mean = 0;

                }else{

                    l_mean = ((parseInt(l / 5) - 1) * 5) + (l % 5);

                }

                var w = 110;

                $(".large_box").find("ul li").eq(i).fadeIn().siblings().hide();

                $(".small_list").find("ul li").eq(i).addClass("on").siblings().removeClass("on");

                var ml = i * w;

                if(ml <= l_mean * w){

                    $(".small_list").find("ul").stop().animate({

                        marginLeft: -ml + "px"

                    })

                }else{

                    $(".small_list").find("ul").stop().animate({

                        marginLeft: -(l_mean * w) + "px"

                    })

                }

            }

        </script>

点击左右按钮时，缩略图部分根据图片的多少marginLeft相应变化。

注：此文是防止我以后碰到类似问题找不到源码

image.png