不能动画jQuery中

Question

图像滑块我是新来的JavaScript/jQuery和我建立的图像滑块。我似乎无法让图像生成动画。我不确定这里有什么问题。

我一直试图做的是让活动幻灯片然后滑动下一个兄弟和动画它，但我在结果得到的是第一图像动画，然后停止。

下面是代码：https://jsfiddle.net/6qntgg5z/

<div id="container"> 
<header> 
    header is here 
</header> 
<div id="carousel"> 
<div class="sliderbuttons"> 
    <input type="button" name="next" id="next" value=" > "> 
    <input type="button" name="next" id="prev" value=" < "> 
    </div> 
    <div class="slides"> 
     <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active"> 
     <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide"> 
     <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide"> 
    </div> 


</div> 

</div> 

CSS

html,body { 
    height: 100%; 
    position: relative; 
} 

*{ 
    box-sizing: border-box; 
} 

#container { 
    width: 90%; 
    margin: 0 auto; 
    height: 100%; 
} 

header { 
    background: black; 
    height: 20px; 
    padding: 1.5em; 
    color: white; 
} 

#carousel { 
    position: relative; 
    margin: 0 auto; 
    width: 45%; 
    margin-top: 15px; 
    height: 100%; 

} 

.slide { 
    position: absolute; 
    max-width: 100%; 
    z-index: 0; 
} 
.sliderbuttons { 
    } 

#prev,#next { 
    position: absolute; 
    background-color: rgba(255, 148, 41, 0.68); 
    box-shadow: 2px white; 
    border:none; 
    font-size: 2em; 
    color: white; 
    font-weight: bold; 
/* font-family: 'Baloo Tamma', cursive; 
*/ padding:10px; 
    top:15%; 
    width: 10%; 
    /*making the prev,next on top of content*/ 
    z-index: 2; 
} 
#prev { 
    left:0; 
} 
#next { 
    right:0; 
     } 

.active { 
    z-index: 1; 
} 

的Javascript

$(document).ready(function(){ 

    setInterval(animateSlider(), 5000); 
    }); 
    //configuration 
    var currentSlide=activeSlide(); 
    var slides=$("#carousel .slides .slide"); 

    //get active slide index 
    function activeSlide(){ 
     var activeSlide=$("#carousel .slides .active").index(); 
     return activeSlide; 
    } 

    function animateSlider() { 
     var $current=slides.eq(activeSlide()); 
     var $next= $(".slides img:first"); 
     $next.addClass('active'); 

     $current.animate({opacity: 0.0}, 1000, 

      function() { 
        $current.removeClass('active'); 
        $current.css({opacity: 1.0}); 
       }); 

Answer 1

试试这个小提琴（做你所需要的，但有其他缺陷，我认为）。在你的HTML您使用的“<”和“>”字符作为您的按钮上的文字，这打破了HTML的流程，所以你应该使用字符代码： <成为<和 >成为>www.w3schools.com/html/html_entities.asp

也是你js错过了一个关闭}和jsfiddle缺少一个jquery库调用（我希望jsfiddle可以使它更快地集成库）。希望能帮助到你。

$(document).ready(function(){ 
 
\t \t setInterval(function(){ animateSlider() }, 5000); 
 
}); 
 
//configuration 
 
var currentSlide = activeSlide(); 
 
var slides = $("#carousel .slides .slide"); 
 

 
//get active slide index 
 
function activeSlide(){ 
 
\t var activeSlide=$("#carousel .slides .active").index(); 
 
\t return activeSlide; 
 
} 
 

 
function animateSlider() { 
 
//remove active class from previous element and assign it to the current one then animate it using animate() function 
 
    var $current=slides.eq(activeSlide()); 
 
    var $next= $(".slides img:first"); 
 
     
 
    $next.addClass('active'); 
 
    
 
    $current.animate({opacity: 0.0}, 1000, function() { 
 
       $current.removeClass('active'); 
 
       $current.css({opacity: 1}); 
 
      }); 
 
}

html,body { 
 
\t height: 100%; 
 
\t position: relative; 
 
} 
 

 
*{ 
 
\t box-sizing: border-box; 
 
} 
 

 
#container { 
 
\t width: 90%; 
 
\t margin: 0 auto; 
 
\t height: 100%; 
 
} 
 

 
header { 
 
\t background: black; 
 
\t height: 20px; 
 
\t padding: 1.5em; 
 
\t color: white; 
 
} 
 

 
#carousel { 
 
\t position: relative; 
 
\t margin: 0 auto; 
 
\t width: 45%; 
 
\t margin-top: 15px; 
 
\t height: 100%; 
 

 
} 
 

 
.slide { 
 
\t position: absolute; 
 
\t max-width: 100%; 
 
\t z-index: 0; 
 
} 
 
.sliderbuttons { 
 
\t } 
 

 
#prev,#next { 
 
\t position: absolute; 
 
\t background-color: rgba(255, 148, 41, 0.68); 
 
\t box-shadow: 2px white; 
 
\t border:none; 
 
\t font-size: 1em; 
 
\t color: white; 
 
\t font-weight: bold; 
 
/* \t font-family: 'Baloo Tamma', cursive; 
 
*/ \t padding:10px; 
 
    top:15%; 
 
\t width: 10%; 
 
\t /*making the prev,next on top of content*/ 
 
\t z-index: 2; 
 
} 
 
#prev { 
 
\t left:0; 
 
} 
 
#next { 
 
\t right:0; 
 
\t \t } 
 

 
.active { 
 
\t z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <header> 
 
     header is here 
 
    </header> 
 
    <div id="carousel"> 
 
    <div class="sliderbuttons"> 
 
     <input type="button" name="next" id="next" value="&gt;"> 
 
     <input type="button" name="next" id="prev" value="&lt;"> 
 
     </div> 
 
     <div class="slides"> 
 
      <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active"> 
 
      <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide"> 
 
      <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide"> 
 
     </div> 
 
    
 
    
 
    </div> 
 
    
 
    </div>