基于jQuery左右滑动切换图片代码

分享一款基于jQuery左右滑动切换图片代码。这是一款基于jQuery实现的左右滑动切换焦点图代码。效果图如下：

在线预览   源码下载

实现的代码：

  <div class="v_out v_out_p">

        <div class="prev">

            <a href="javascript:void(0)"></a>

        </div>

        <div class="v_show">

            <div class="v_cont">

                <ul>

                    <li index="0" style="background: #f00">[第1讲]</li>

                    <li index="1" style="background: #ff0">[第2讲]</li>

                    <li index="2" style="background: #f0f">[第3讲]</li>

                    <li index="3" style="background: #999">[第4讲]</li>

                    <li index="4" style="background: #666">[第5讲]</li>

                </ul>

            </div>

        </div>

        <div class="next">

            <a href="javascript:void(0)"></a>

        </div>

        <ul class="circle">

            <li class="circle-cur">1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </div>

    <script type="text/javascript">



        $(function () {



            /*======next======*/

            $(".next a").click(function () { nextscroll() });



            function nextscroll() {



                var vcon = $(".v_cont ");

                var offset = ($(".v_cont li").width()) * -1;



                vcon.stop().animate({ left: offset }, "slow", function () {



                    var firstItem = $(".v_cont ul li").first();

                    vcon.find("ul").append(firstItem);

                    $(this).css("left", "0px");



                    circle()



                });



            };





            function circle() {



                var currentItem = $(".v_cont ul li").first();

                var currentIndex = currentItem.attr("index");



                $(".circle li").removeClass("circle-cur");

                $(".circle li").eq(currentIndex).addClass("circle-cur");



            }



            //setInterval(nextscroll,2000)



            /*======prev======*/

            $(".prev a").click(function () {



                var vcon = $(".v_cont ");

                var offset = ($(".v_cont li").width() * -1);



                var lastItem = $(".v_cont ul li").last();

                vcon.find("ul").prepend(lastItem);

                vcon.css("left", offset);

                vcon.animate({ left: "0px" }, "slow", function () {

                    circle()

                })



            });



            /*======btn====circle======*/

            var animateEnd = 1;



            $(".circle li").click(function () {



                if (animateEnd == 0) { return; }



                $(this).addClass("circle-cur").siblings().removeClass("circle-cur");



                var nextindex = $(this).index();

                var currentindex = $(".v_cont li").first().attr("index");

                var curr = $(".v_cont li").first().clone();



                if (nextindex > currentindex) {



                    for (var i = 0; i < nextindex - currentindex; i++) {



                        var firstItem = $(".v_cont li").first();

                        $(".v_cont ul").append(firstItem);



                    }



                    $(".v_cont ul").prepend(curr);



                    var offset = ($(".v_cont li").width()) * -1;



                    if (animateEnd == 1) {



                        animateEnd = 0;

                        $(".v_cont").stop().animate({ left: offset }, "slow", function () {



                            $(".v_cont ul li").first().remove();

                            $(".v_cont").css("left", "0px");

                            animateEnd = 1;



                        });



                    }



                } else {



                    var curt = $(".v_cont li").last().clone();



                    for (var i = 0; i < currentindex - nextindex; i++) {

                        var lastItem = $(".v_cont li").last();

                        $(".v_cont ul").prepend(lastItem);

                    }



                    $(".v_cont ul").append(curt);



                    var offset = ($(".v_cont li").width()) * -1;



                    $(".v_cont").css("left", offset);





                    if (animateEnd == 1) {



                        animateEnd = 0;

                        $(".v_cont").stop().animate({ left: "0px" }, "slow", function () {



                            $(".v_cont ul li").last().remove();

                            animateEnd = 1;



                        });



                    }



                }



            });



        })

  

    </script>

css代码：

 *

        {

            margin: 0px;

            padding: 0px;

            list-style-type: none;

        }

        .v_out

        {

            width: 748px;

            margin: 20px auto;

            overflow: hidden;

        }

        .v_show

        {

            width: 665px;

            overflow: hidden;

            position: relative;

            height: 280px;

            float: left;

        }

        .v_cont

        {

            width: 6650px;

            position: absolute;

            left: 0px;

            top: 0px;

        }

        .v_cont ul

        {

            float: left;

            text-align: center;

            line-height: 50px;

        }

        .v_cont ul li

        {

            width: 665px;

            height: 250px;

            background: #f8f8f8;

            float: left;

            margin-top: 3px;

        }

        

        /*---圆圈---*/

        .v_out_p

        {

            position: relative;

            overflow: visible;

        }

        .circle

        {

            position: absolute;

            left: 40px;

            top: 290px;

        }

        .circle li

        {

            width: 120px;

            height: 60px;

            float: left;

            margin-right: 10px;

            background: #ccc;

        }

        .circle .circle-cur

        {

            background: #f00;

        }

        

        /*---切换---*/

        .prev, .next

        {

            float: left;

            padding: 105px 9px 0;

        }

        .prev a

        {

            background: #f00;

        }

        .prev .ico_1

        {

            background: url(input_a.gif) no-repeat 0 -3757px;

        }

        

        .next a

        {

            background: #f00;

        }

        .next .ico_2

        {

            background: url(input_a.gif) no-repeat right -3757px;

        }

        .prev, .prev a, .next, .next a

        {

            width: 21px;

            height: 28px;

            display: block;

        }

via：http://www.w2bc.com/Article/31457