В этом коде кругового слайдера предыдущая и следующая функция не работают должным образом

0

В настоящее время я делаю один J-запрос Slider, который работает таким образом, что когда вы нажмете кнопку "Далее", который будет сдвигаться справа налево и когда вы нажмете prev, который будет скользить слева направо. изображения ограничены, так что он начнет показывать предыдущее изображение круговым способом. Проблема в том, что кнопка "Предыдущий" и "Следующий" при нажатии не работает должным образом. Я не могу найти лучшее решение для этого. Может ли кто-нибудь предложить мне, что может быть лучшим способом написать его. Или есть эффективная техника для создания такого слайдера без использования каких-либо плагинов слайдера.

Код JQuery

$(document).ready(function(){    
var galW =  $('#gallery').width();  
var imgN = $('#slider img').length;
$("#slider").width((galW/6)*imgN);
$('#next').click(function(){    
    var first = $("#slider img").first();
    var last = $("#slider img").last();
    first.stop().animate({marginLeft : -150},1500,function(){
first.detach().insertAfter(last).css('marginLeft','0px');
});
});

$('#prev').click(function(){
        var first = $("#slider img").first();
    var last = $("#slider img").last();
    last.detach().insertBefore(first).css('marginLeft','-150px');
    first.stop().animate({marginLeft : 0},1500);
});
});

Код HTML

<div id="gallery">
            <div id="gallery_overflow">
                <div id="slider">
                    <img src="#" width="150px" height="50px"/>
                    <img src="#" width="150px" height="50px"/>
                    <img src="#" width="150px" height="50px"/>
                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>

                </div>
            </div>
            <div id="prev"><img src="left.png" width="40px" height="40px"/></div>
            <div id="next"><img src="right.png" width="40px" height="40px"/></div>
        </div>

Изображения находятся в # Местах..

Теги:
jquery-plugins

1 ответ

0
Лучший ответ

С некоторыми изменениями вашего кода вы можете заставить его работать следующим образом (для поддержки ссылок на изображения смотрите ниже в части EDIT),

CSS

#gallery{
    overflow:hidden;
}
#slider {
    white-space:nowrap;
}
#slider img {
     margin-left:5px; 
}

JS

$(document).ready(function () {

    var galW = $('#gallery').width();
    var imgN = $('#slider img').length;
    var sliding = false;
    $("#slider").width((galW / 6) * imgN);
    $('#next').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider img").first();
        var last = $("#slider img").last();
        var defaultMarginLeft = first.css("margin-left");
        first.animate({
            marginLeft: (-1*first.width())
        }, 1500, function () {
            first.detach().insertAfter(last).css('marginLeft', defaultMarginLeft);
            sliding = false;
        });
    });

    $('#prev').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider img").first();
        var last = $("#slider img").last();
        var defaultMarginLeft = first.css("margin-left");
        last.detach().insertBefore(first).css('marginLeft', (-1*first.width()));
        first = $("#slider img").first();
        first.animate({
            marginLeft: defaultMarginLeft
        }, 1500,function(){sliding=false;});
    });

});

http://jsfiddle.net/2dwsW/

РЕДАКТИРОВАТЬ

Другая реализация с использованием элемента span в качестве заполнителя (на самом деле это заполнитель классов, который используется в селекторах, поэтому любой встроенный блок-элемент может использоваться вместо span с этим именем класса) для правильной поддержки ссылок на изображениях, а также для включения требуется любой элемент.

CSS

#gallery{
    overflow:hidden;
}
#slider {
    white-space:nowrap;
}
#slider .placeholder {
     margin-left:5px; 
}

JS

$(document).ready(function () {

    var galW = $('#gallery').width();
    var imgN = $('#slider .placeholder').length;
    var sliding = false;
    $("#slider").width((galW / 6) * imgN);
    $('#next').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider .placeholder").first();
        var last = $("#slider .placeholder").last();
        var defaultMarginLeft = first.css("margin-left");
        first.animate({
            marginLeft: (-1*first.width())
        }, 1500, function () {
            first.detach().insertAfter(last).css('marginLeft', defaultMarginLeft);
            sliding = false;
        });
    });

    $('#prev').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider .placeholder").first();
        var last = $("#slider .placeholder").last();
        var defaultMarginLeft = first.css("margin-left");
        last.detach().insertBefore(first).css('marginLeft', (-1*first.width()));
        first = $("#slider .placeholder").first();
        first.animate({
            marginLeft: defaultMarginLeft
        }, 1500,function(){sliding=false;});
    });

});

HTML

<div id="gallery">
    <div id="gallery_overflow">
        <div id="slider">
            <span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span>
        </div>
    </div>
    <div id="prev">PREV</div>
    <div id="next">NEXT</div>
</div>

http://jsfiddle.net/2dwsW/1/

Поделиться
  • 0
    У меня возникла одна проблема, когда я пытался вставить ссылку на изображения. На первый раз ссылки работают нормально. после этого все вышло из-под контроля
  • 0
    @Vinay Действительно, если вы размещаете ссылки на изображениях слайдов, селекторы нужно немного изменить. Я обновлю ответ.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню