j查询图像滑块淡入不起作用

我正在从本教程构建一个图像滑块。 youtube.com

我无法让第一个图像淡入我已经多次查看了代码，但看不到我出错的地方。这是我的代码

.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;
    }

爪哇语

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);
}

在代码中，您添加了}};而不是});

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);
}

.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;
    }

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

这是工作片段。这是您要搜索的内容吗？

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>

相关内容

最新更新

热门标签：