0

私は完全にうまく機能するスライダーを持っていますが、ナビゲーションの動作のように動作を少し変更する必要があります.

最初のスライドでは、右/次のオプションのみを使用可能にし、2 番目/3 番目/4 番目などは、左右または次と前の両方を使用できるようにしたいと考えています。最後のスライドに到達すると、次または右のオプションが非表示になるため、ループしません。

これが私のスクリプトです。

jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});

4

2 に答える 2

0

moveLeft および moveRight 関数では、 $('#slider ul').attr("left") 属性を確認できます。0 の場合、($('#slider ul').attr("width") - ($('#slider ul li').attr("width"))) に等しい場合、最初のスライドにいます。最後に。

于 2013-10-01T10:26:46.733 に答える