jQuery图像滑块

我正在从本教程中构建一个来自jQuery的图像滑块 - https://www.youtube.com/watch?v=QtYP_eSVKfs。jQuery图像滑块

我刚完成第二部分 - 构建自动图像幻灯片。结果应该是图像从1循环到4，然后在淡入和淡出时再回来。

但是，当我加载页面时，第一个图像淡入，但循环不启动。第一张图片仅保留在显示屏上。

我猜这是我的startSlider功能，但我找不到问题。我究竟做错了什么？

HTML：

<html> 
<head> 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
    <meta charset="utf-8"> 
    <title>Slider</title> 
</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.jpg"> 
     <img id="4" src="images/image4.jpg"> 
    </div> 

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


</div> 

<script src="jquery.js"></script> 
<script src="scripts.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: 30px; 
    text-decoration: none; 
    color: #666; 
} 

a.left { 
    float: left; 
} 

a.right { 
    float: right; 
}

SCRIPT：

var sliderInt = 1; 
var sliderNext = 2; 

$(document).ready(function(){ 
    $('#slider > img#1').fadeIn(300); 
    startSlider(); 
}); 

function startSlider() { 
    count = $('#slider > img').length(); 

    if(sliderNext > count) { 
     sliderNext = 1; 
     sliderInt = 1; 
    } 

    loop = setInterval(function() { 
     $('#slider > img').fadeOut(300); 
     $('#slider > img#' + sliderNext).fadeIn(300); 

     sliderInt = sliderNext; 
     sliderNext = sliderNext + 1; 

    }, 3000); 

}

来源

2016-10-26 jjhduggan

长度不是长度（） – madalinivascu

length不length()，将若在setInterval函数

var sliderInt = 1; 
 
var sliderNext = 2; 
 

 
$(document).ready(function() { 
 
    $('#slider > img#1').fadeIn(300); 
 
    startSlider(); 
 
}); 
 

 
function startSlider() { 
 
    count = $('#slider > img').length; 
 

 

 
    loop = setInterval(function() { 
 
    $('#slider > img').fadeOut(300); 
 
    $('#slider > img#' + sliderNext).fadeIn(300); 
 

 
    sliderInt = sliderNext; 
 
    sliderNext = sliderNext + 1; 
 
    if (sliderNext > count) { 
 
     sliderNext = 1; 
 
     sliderInt = 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: 30px; 
 
    text-decoration: none; 
 
    color: #666; 
 
} 
 
a.left { 
 
    float: left; 
 
} 
 
a.right { 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div id="slider"> 
 
    <img id="1" src="http://lorempixel.com/400/200/"> 
 
    <img id="2" src="http://lorempixel.com/400/200/sports/"> 
 
    <img id="3" src="http://lorempixel.com/400/200/abstract/"> 
 
    <img id="4" src="http://lorempixel.com/400/200/city/"> 
 
    </div> 
 

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

 

 
</div>

来源

2016-10-26 04:11:40 madalinivascu

对于越来越长，你应该使用长度不长（）

数= $（ '＃滑块> IMG'）的长度（）。 //错误
count = $（'＃slider> img'）。length; //正确

来源

2016-10-26 05:07:23

jQuery图像滑块

回答

相关问题