Question

我正在构建本教程中的Image滑块。 youtube.com

我无法获得fadeIn的第一张图片我已多次查看代码，但看不出我错在哪里。这是我的代码

HTML

<DOCTYPE html>
<html>
<head>
    <title>Helping Develope | Jquery Slider</title>
    <link rel="stylesheet" href="css/slider.css" type="text/css">
    <meta charset="utf-8">
</head>
<body>

<div class="wrapper">

    <div id='slider'>
        <img id="1" src="Images/Image1.jpg">
        <img id="2" src="Images/Image2.jpg">
        <img id="3" src="Images/Image3.png">
        <img id="4" src="Images/Image4.png">
    </div>

    <a href="#" class='left'>Previous</a>
    <a href="#" class='right'>Next</a>

</div>

<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>

</body>
</html>

CSS

    .wrapper{
        width: 600px;
        margin: 0 auto;
    }

    #slider {
        width:600px;
        height:400px;
        overflow:hidden;
        margin:30px auto;
    }
    #slider > img{
        width: 600px;
        height:400px;
        float:left;
        display:none;
    }

    a {
        padding:5px 10px;
        background-color:#F0F0F0;
        margin-top:30;
        text-decoration: none;
        color: red;

    }

    a.left{
        float:left;
    }

    a.right{
        float:right;
    }

的Javascript

var sliderInt=1;
var sliderNext=2;

$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider()
});
function startSlider(){
    count = $("#slider > img").size();
    loop= setInterval(function(){
        if(sliderNext > count) {    
            sliderNext=1;
            sliderInt=1;
        }           
        $("#slider>img").fadeOut(300);
        $("#slider>img#" + sliderNext).fadeIn(300);
        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;
    }, 3000);
}

Answer 1

这是工作片段。你在寻找什么？

var sliderInt=1,
    sliderNext=2;

$(document).ready(function() {
  $("#slider > img#1").fadeIn(300);
})

    .wrapper {
        width: 600px;
        margin: 0 auto;
    }

    #slider {
        width:600px;
        height:400px;
        overflow:hidden;
        margin:30px auto;
    }
    #slider > img{
        width: 600px;
        height:400px;
        float:left;
        display:none;
    }

    a {
        padding:5px 10px;
        background-color:#F0F0F0;
        margin-top:30;
        text-decoration: none;
        color: red;

    }

    a.left{
        float:left;
    }

    a.right{
        float:right;
    }

<DOCTYPE html>
<html>
<head>
    <title>Helping Develope | Jquery Slider</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <meta charset="utf-8">
</head>
<body>

<div class="wrapper">

    <div id='slider'>
        <img id="1" src="Images/Image1.jpg">
        <img id="2" src="Images/Image2.jpg">
        <img id="3" src="Images/Image3.png">
        <img id="4" src="Images/Image4.png">
    </div>

    <a href="#" class='left'>Previous</a>
    <a href="#" class='right'>Next</a>

</div>

<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>

</body>
</html>

Answer 2

在您的代码中，您添加了}}; });

的内容

＆＃13;

var sliderInt=1;
var sliderNext=2;

$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider()
});
function startSlider(){
 	count = $("#slider > img").length;
 	loop= setInterval(function(){
		if(sliderNext > count) { 	
			sliderNext=1;
			sliderInt=1;
		}			
		$("#slider>img").fadeOut(300);
		$("#slider>img#" + sliderNext).fadeIn(300);
		sliderInt = sliderNext;
		sliderNext = sliderNext + 1;
	}, 3000);
}

＆＃13;

.wrapper{
        width: 600px;
        margin: 0 auto;
    }

    #slider {
        width:600px;
        height:400px;
        overflow:hidden;
        margin:30px auto;
    }
    #slider > img{
        width: 600px;
        height:400px;
        float:left;
        display:none;
    }

    a {
        padding:5px 10px;
        background-color:#F0F0F0;
        margin-top:30;
        text-decoration: none;
        color: red;

    }

    a.left{
        float:left;
    }

    a.right{
        float:right;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DOCTYPE html>
<html>
<head>
    <title>Helping Develope | Jquery Slider</title>
    <link rel="stylesheet" href="css/slider.css" type="text/css">
    <meta charset="utf-8">
</head>
<body>

<div class="wrapper">

    <div id='slider'>
        <img id="1" src="http://placehold.it/600x400g/ff0000">
        <img id="2" src="http://placehold.it/600x400g/00ff00">
        <img id="3" src="http://placehold.it/600x400g/0000ff">
        <img id="4" src="http://placehold.it/600x400g/000000">
    </div>

    <a href="#" class='left'>Previous</a>
    <a href="#" class='right'>Next</a>

</div>

<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>

</body>
</html>

＆＃13;

jquery图像滑块淡入淡出不起作用

2 个答案: