Проблем с движещи се изображения в плъзгач наляво и надясно

Написах код за плъзгач на съдържание и мога да плъзгам съдържанието отдясно наляво при правилно щракване.

Ако обаче трябва да плъзгам съдържанието отляво надясно, трябва да щракна два пъти върху бутона със стрелка наляво за първи път, след като плъзгането отляво надясно работи с едно щракване.

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

По-долу е кодът.

<head>
    <title></title>
</head>
<link rel="stylesheet" type="text/css" href="/bgcss/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