Question

我是Javascript的新手并试图让滑块自动滑动。问题是它没有滑动。我甚至无法点击它使其滑动。我的代码如下，（我已经包含了整页样本）。 caroussel应该按div（一次一个）滑动div但没有任何反应。实际上，我感觉好像我的Javascript甚至根本没有被执行。任何帮助都将非常感激。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
    #myslide {
        width:705px;
        overflow:hidden;
        position: relative;
        height:80px;
        margin-bottom:20px;
    }

    #myslide .cover {
        width:2820px;
        position: absolute;
        height:80px;
    }

    #myslide .mystuff {
        width:705px;
        float:left;
        padding:20px 0;
        font-size:15px;
        font-style: italic;
        color:#b0b0b0;
        line-height:20px;
        text-align:center;
    }

    .button1,
    .button2,
    .button3,
    .button4    {
        background:#999;
        padding:6px;
        display:block;
        float:left;
        margin-right:5px;
    }

    .active { 
        background:#111;
        padding:6px;
        display:block;
        float:left;
        outline:none;
    }
    .clear { clear: both; }

</style>


</head>
<body>

<div id="myslide">
  <div class="cover">
      <div class="mystuff">
          1 Lorem Dolor Ipsum...
      </div>
      <div class="mystuff">
          2 Lorem Dolor Ipsum...
      </div>
      <div class="mystuff">
          3 Lorem Dolor Ipsum...
      </div>
      <div class="mystuff">
          4 Lorem Ipsum Dolor sit amet ....
      </div>
  </div>
</div>

<div class="clear"></div>

<div id="button">
  <a class="button1 active" rel="1"></a>
  <a class="button2" rel="2"></a>
  <a class="button3" rel="3"></a>
  <a class="button4" rel="4"></a>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<script>
$(document).ready(function (){

$('#button a').click(function(){
    var integer = $(this).attr('rel');
    $('#myslide .cover').animate({left:-705*(parseInt(integer)-1)})
    $('#button a').each(function(){
        $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
    });
});
    Next();
    setInterval ( function(){Next();}, 1000 );
});

function Next(){
    var _next = false;
    $('#button a').each(function(){
        if(_next){
            $(this).addClass('active');
            _next = false;
        }
        else if($(this).hasClass('active')){
            _next = true;
            _next = true;
            $(this).removeClass('active')
        }

    });  
    if(_next)
        $("#button a:eq(0)").addClass("active");

   var activeIndex = parseInt($(".active").attr("rel"));
   $('#myslide .cover').animate({left:-705*(parseInt(activeIndex)-1)});      
}


</script>

Answer 1

对于初学者，您的功能未正确关闭。你在else if语句之后缺少大括号。尝试：

$(document).ready(function (){

$('#button a').click(function(){
    var integer = $(this).attr('rel');
    $('#myslide .cover').animate({left:-705*(parseInt(integer)-1)})
    $('#button a').each(function(){
        $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
    });
});
    Next();
    setInterval ( function(){Next();}, 1000 );
});

function Next(){
    var _next = false;
    $('#button a').each(function(){
        if(_next){
            $(this).addClass('active');
            _next = false;
        }
        else if($(this).hasClass('active')){
            _next = true;
        }
    })
}

其次，你使用的是jQuery Slim，它不包含任何动画功能（参见jquery : $().animate() is not a function）。相反，使用常规的jQuery库。

JavaScript Caroussel不滑动

1 个答案: