Проблема с движением изображений в слайдере влево и вправо

Я написал код слайдера контента, и я могу правильно сдвигать контент справа налево при щелчке мышью.

Однако, если мне нужно сдвинуть контент слева направо, я должен дважды щелкнуть кнопку со стрелкой влево в первый раз, после чего сдвиг слева направо работает с одним щелчком.

Кроме того, как только я начинаю перемещать содержимое слева направо, если мне нужно перемещать содержимое справа налево, я должен дважды дважды щелкнуть кнопку со стрелкой вправо в первый раз.

Ниже приведен код.

<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>


slider html jquery jquery-animate
person user1964217    schedule 09.01.2013    source источник
comment
вы получаете какую-либо ошибку в консоли браузера при нажатии следующей или предыдущей кнопки?   -  person Praveen Puglia    schedule 09.01.2013
comment
@pjp Нет ошибок при нажатии правой или левой кнопки   -  person user1964217    schedule 11.01.2013

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте с этим и посмотрите, поможет ли:

<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>
person Jai    schedule 09.01.2013