JavaScript Caroussel Not Sliding

-1

私はJavascriptを初めて使用しており、スライダを自動スライドさせようとしています。問題は滑りません。私はそれをスライドさせるためにそれをクリックすることも傾ける。私のコードは以下の通りです（私は完全なサンプルを含んでいます）。カルーセルはdiv（1度に1つ）でdivをスライドさせる必要がありますが、何も起こりません。私のJavascriptはまったく実行されていないようにITは実際に感じます。どのような助けも非常に高く評価されます。手始めにJavaScript Caroussel Not Sliding

<!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>

出典

2017-12-27 Lawless Leopard

"ITは実際に私のJavascriptがまったく実行されていないかのように感じます"という理由で、いくつかのコンソール文を追加して参照してください。 –

まず、機能が正しく閉じられていません。 'else if'文の後ろに中括弧がありません。次に、アニメーション機能を含まないjQuery Slimを使用しています。代わりに、通常のjQueryライブラリを使用します。 – AndroidNoobie

@AndroidNoobieあなたは問題がjqueryスリムだったのは間違いありませんでした。一度、私はelseを修正し、ライブラリを変更しました。それはすべてうまく動きました。私はそれを受け入れることができるように答えを書くでしょうか？信用供与はどこですか？ –

、あなたの機能が正しく閉じられていません。 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 : $().animate() is not a functionを参照）を含んでいないjQueryのスリムを、使用しています。代わりに、通常のjQueryライブラリを使用します。

出典

2017-12-27 23:08:34 AndroidNoobie

JavaScript Caroussel Not Sliding

答えて

関連する問題