Question

我有一个滑块，它使用JQuery自动滑动图像，或者在用户按下按钮时滑动。当我在我的网站上实施时，滑块将始终启动两次，跳过一个图像。当您按下按钮以及将其设置为自动工作时，会发生这种情况。但是，当我将代码复制到JSFiddle时，该函数工作正常，只能由单个图像进行。什么可能导致这种情况？

以下是Fiddle

HTML，JS：

HTML

    <div id="slider">
        <button class="control_next">&#171;</button>
        <button class="control_prev">&#187;</button>

        <ul>
            <li>SLIDE 1</li>
            <li>SLIDE 2</li>
            <li>SLIDE 3</li>
            <li>SLIDE 4</li>
        </ul>  
    </div>

    <div class="slider_option">
        <input type="checkbox" id="checkbox">
        <label for="checkbox">Autoplay Slider</label>
    </div>

的Javascript

$(document).ready(function() {

/*JQuery for fade in highlighting of links*/
$(".link").hover(function() {
    $(this).animate({ color:'#fe57a1'}, 100);
}, function() {
    $(this).animate({ color: '#fff'}, 300);
});


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', '');
        });
    };



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



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

});
});

JQuery Slider Show一次滑动两个图像

0 个答案: