jQuery实现div左右滑动

最新推荐文章于 2024-08-27 16:05:08 发布
boy_TJ
最新推荐文章于 2024-08-27 16:05:08 发布
阅读量7.8k
点赞数 1
分类专栏： html 文章标签： jquery
本文链接：https://blog.csdn.net/TJLsir/article/details/77215911
版权
html 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
直接上代码
<body>  
        <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>
    <style>
        *
        {
            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;
        }
    </style>
    <div style="width: 1200px;height: 100px;background-color: red;"></div>
    </body>