Question

我编写了一个内容滑块代码，我可以在点击后正确地从右向左滑动内容。

但是，如果我必须从左向右滑动内容，我必须首次单击左箭头按钮两次，然后单击一下从左向右滑动。

此外，一旦我开始从左向右滑动内容，如果我必须从右向左滑动内容，我必须首次双击右箭头按钮两次。

以下是代码。

<head>
    <title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.1.min.js">

</script>
<script type="text/javascript" src="js/jquery.easing.1.3.js">

</script>
<!--script type="text/javascript" src="js/slidR.js"> </script-->

<body>
    <div id="sliderBlock">
        <div id="slide1" class="slide">
            <img src="img/nmo.jpg" />
        </div>
        <div id="slide2" class="slide">
            <img src="img/tys.jpg" />
        </div>
        <div id="slide3" class="slide">
            <img src="img/ups.jpg" />
        </div>
        <div id="slide4" class="slide">
            <img src="img/we.jpg" />
        </div>
    </div>
</body>
<script>
    $(function () {
        var count = $("#sliderBlock").children().length;
        var slideWidth = $(".slide").outerWidth();
        var slideHeight = $(".slide").outerHeight();
        var totalWidth = count * slideWidth;
        var easeFn = "swing";
        var fs = 1;
        var ls = count;
        var currentSlide;
        $("#sliderBlock").append("<div id='next'></div>")
        $("#sliderBlock").append("<div id='prev'></div>")
        $(".slide").wrapAll('<div id="allSlides">');
        $("#allSlides").css({
            "width": totalWidth,
            "height": slideHeight
        });
        $("#sliderBlock").append("<ul id='pagination'>");
        for (i = 1; i <= count; i++) {
            $("#pagination").append("<li><a id='slide" + i + "'>" + i + "</a></li>")
        }
        $("#pagination li a#slide1").addClass("liveSlide");
        var interval = 3000;
        var timeInterval = setInterval(function () {
            slidR()
        }, interval);
        $("#prev").on("click", slidR_L)
        $("#next").on("click", slidR_R)

        function slidR() {

            //  slidR_R();
            //  slidR_L();

        }
        var curSlide, curSlideNo, prevSlideNo, divReOrder;
        divReOrder = 1;

        function slidR_R() {

            $("#allSlides").animate({
                left: -slideWidth
            }, 1000, function () {
                $(".slide:first-child").clone().appendTo("#allSlides");
                $(".slide:first-child").detach();
                $("#allSlides").css('left', "0px");
            });

        }

        function slidR_L() {

            $("#allSlides").animate({
                left: "0"
            }, 1000, function () {

                $(".slide:last-child").clone().prependTo("#allSlides");
                $(".slide:last-child").detach();
                $("#allSlides").css('left', -slideWidth);
            });

        }
    });
</script>

Answer 1

试试这个，看看是否有帮助：

<script>

        function slidR_R() {
            $("#allSlides").animate({
                left: -slideWidth
            }, 1000, function () {
                $(".slide:first-child").clone().appendTo("#allSlides");
                $(".slide:first-child").detach();
                $("#allSlides").css('left', "0px");
            });
        }

        function slidR_L() {
            $("#allSlides").animate({
                left: "0"
            }, 1000, function () {

                $(".slide:last-child").clone().prependTo("#allSlides");
                $(".slide:last-child").detach();
                $("#allSlides").css('left', -slideWidth);
            });
        }
    $(function () {
        var count = $("#sliderBlock").children().length;
        var slideWidth = $(".slide").outerWidth();
        var slideHeight = $(".slide").outerHeight();
        var totalWidth = count * slideWidth;
        var easeFn = "swing";
        var fs = 1;
        var ls = count;
        var currentSlide;
        $("#sliderBlock").append("<div id='next'></div>")
        $("#sliderBlock").append("<div id='prev'></div>")
        $(".slide").wrapAll('<div id="allSlides">');
        $("#allSlides").css({
            "width": totalWidth,
            "height": slideHeight
        });
        $("#sliderBlock").append("<ul id='pagination'>");
        for (i = 1; i <= count; i++) {
            $("#pagination").append("<li><a id='slide" + i + "'>" + i + "</a></li>")
        }
        $("#pagination li a#slide1").addClass("liveSlide");
        var interval = 3000;
        var timeInterval = setInterval(function () {
            slidR()
        }, interval);
        $("#sliderBlock").on("click", "#prev", slidR_L);
        $("#sliderBlock").on("click", "#next", slidR_R);

        var curSlide, curSlideNo, prevSlideNo, divReOrder;
        divReOrder = 1;


    });
</script>

在左右滑块中移动图像时出现问题

1 个答案: