jQuery实现div左右滑动

深藏阁楼爱情的钟 2022-06-10 09:42 292阅读 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>