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圖像滑塊

回答

相關問題