Question

我在制作滑块时遇到问题，当你按下右箭头时它工作正常但是当我按下左手按钮时它会完全弄乱脚本。

我想知道是否有人可以查看我的代码并查看它是否有任何明显错误。因为我从不同的站点获取代码，所以它没有问题。

我在这里有一个链接：

http://emopreview.co.uk/STIHL/12113081/video.html

Jquery是：

$(document).ready(function() {
var nav = $('#wrapper .slider').css('overflow', 'hidden').children('ul'),
sliding = false,
ul = $('#wrapper .slider ul'),
count = $('#wrapper .slider ul li').length,
width = count * 178;    

$('#wrapper .slider ul').width(width);

    function slideLeft() {
        if(sliding){
            return false;
        }
        sliding = true;
        ul.animate({
            left: '0'
        }, 1000, function(){
            sliding = false;
        });
    }
    function moveLeft() {
        $('#wrapper .slider ul li:first').insertBefore($('#wrapper .slider ul li:last'));
        ul.css("left", "-178px");
    }

    function slideRight() {
        if(sliding){
            return false;
        }
        sliding = true;
        ul.animate({
            left: '-=178'
        }, 1000, function() {
            sliding = false;

            $('#wrapper .slider ul li:first').appendTo(ul);
            ul.css("left", "0");
        });
    }
    var autoSlide;
    autoSlide = setInterval(function() {
        slideRight();
    }, 3000);

    $('#wrapper .slider_container').mouseenter(function() {
        clearInterval(autoSlide);
    }).mouseleave(function() {
        autoSlide = setInterval(function() {
            slideRight();
        }, 3000);
    });
    $('#slider-nav').show();

    $('#slider-nav .right_arrow').click(slideRight);

    $('#slider-nav .left_arrow').click(function() {
        moveLeft();
        slideLeft();
    });
 });

由于

Answer 1

更改您的代码：

    function slideLeft() {
        if(sliding){
            return false;
        }
        sliding = true;
        ul.animate({
            left: ''
        }, 1000, function(){
            sliding = false;
            ul.css("left","0px");
        });
    }
    function moveLeft() {
        ul.css("left", "-178px");           
        $('#wrapper .slider ul li:last').insertBefore($('#wrapper .slider ul li:first'));
    }

两个问题：

您将第一个li移至ul的末尾，即使您打算向左移动。
你的动画和绝对定位错了。

按下左箭头时，Jquery滑块出现问题

1 个答案: