Question

我是javascript / jquery的新手，我正在构建一个图像滑块。我似乎无法让图像生动。我不确定这里有什么问题。

我一直试图做的是获取活动幻灯片然后滑动下一个兄弟并为其设置动画，但我得到的结果是第一张图片有生气，然后停止。

<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中，您使用了＆＃39;＆lt;＆＃39;和＆＃39;＆gt;＆＃39;字符作为您的按钮文本，这打破了html的流程，因此您应该使用字符代码： <变为<和 >变为> www.w3schools.com/html/html_entities.asp

你的js也错过了一个结束}而jsfiddle错过了一个jquery库调用（我希望jsfiddle能让它更快地集成库）。希望它有所帮助。

＆＃13;

$(document).ready(function(){
		setInterval(function(){ 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() {
//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});
            });
}

＆＃13;

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: 1em;
	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;
}

＆＃13;

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

＆＃13;

无法在jquery中为图像滑块设置动画

1 个答案: