jQuery图像滑块

jQuery Image Slider

本文关键字：图像 jQuery      更新时间：2023-09-26

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

我刚刚完成了第二部分——构建自动图像幻灯片。结果应该是图像从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;
}

脚本:

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

length不是length()，将if放在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>

要获取长度，应该使用length而不是length()

count = $('#slider> img').length();//错误
Count = $('#slider> img').length;//正确的

相关文章：