如何在每個特定時間滑下1張照片等

Question

我想製作幻燈片，並且我想每2分鐘將其行爲滑下1張照片等等，直到圖像結束，然後重新從第一張照片。

我試圖讓它成爲它的一部分（每2分鐘更換一張圖片），但是不能滑下1張圖片，而是改變圖片而不用滑下。

一個扶我，使整個幻燈片

我的代碼如下

HTML

<div id="slideshow"> 
    <img src="images/slideshow.jpg" alt="" title="" /> 
    <img src="images/slideshow2.jpg" alt="" title="" /> 
    <img src="images/slideshow3.jpg" alt="" title="" /> 
    <img src="images/slideshow4.jpg" alt="" title="" /> 
    <img src="images/slideshow5.jpg" alt="" title="" /> 
</div> 
<script type="text/javascript"> 
    window.onload = slideShow; 
</script> 

的Javascript

var counter = 0; 
function slideShow(){ 
    var fatherElem = document.getElementById('slideshow'); 
    var fatherChildren = fatherElem.children; 
    var fatherElemScroll = fatherElem.scrollTop; 
    counter++; 
    if (fatherChildren.length > counter) { 
     fatherElem.scrollTop += 300; 
    } 
    else { 
     fatherElem.scrollTop = 0; 
     counter = 0; 
    } 

    setTimeout(slideShow, 1000); 
    document.getElementsByName('SearchBox')[0].value = counter; 
} 

我很抱歉，FO r我的大問題，但我真的需要幫助

Answer 1

您正在幻燈片div每秒300px操縱scrollTop。如果你的圖像高度正好是300px，你的div正好是300px高，沒有溢出，你的div迫使你的圖像在一行中垂直，那麼你的代碼會做的是每秒切換到下一個圖像。因此，在回答您的問題時：

1. 您尚未編寫圖像的任何代碼以進行滑動。改變scrollTop 300是突然改變，而不是滑動改變。
2. 您的代碼每秒更改一次scrollTop值，而不是每兩分鐘一次。 setTimeout的第二個參數是一個以毫秒爲單位的值。如果您想要兩分鐘，則必須將該值設置爲（1000 * 60 * 2）。

這裏是你的代碼在jsfiddle上的行動：http://jsfiddle.net/jfriend00/NyYpB/與一些真實的圖像。

如果您希望圖片實際滑動，那麼您必須編寫一些動畫代碼，以便在希望動畫運行的時間段內，將scrollTop從當前值緩慢操作到enxt較高值。

從頭開始動畫可能會非常棘手。大多數人會選擇使用CSS3動畫或使用動畫庫（如jQuery或YUI中的動畫庫），它已經爲您做了正確的補間工作，因爲它會更快並可能產生更高質量的結果。

以下是您可以使用jQuery查看和使用的示例：http://jsfiddle.net/jfriend00/CyCDD/。

HTML：

<div id="slideshow"> 
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130938160417/1190079664_chLyW-Ti.jpg" alt="" title="" /> 
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050422/1190083195_Az688-Ti.jpg" alt="" title="" /> 
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050421/1190083481_C3nag-Ti.jpg" alt="" title="" /> 
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070426/1190078330_umaLY-Ti.jpg" alt="" title="" /> 
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070425/1190080772_RmZX2-Ti.jpg" alt="" title="" /> 
</div> 

CSS：

#slideshow {width: 100px; height: 66px; font-size: 0; overflow: hidden;} 

的Javascript：

var counter = 0; 

function gotoNextSlide() { 
    var $ss = $("#slideshow"); 
    if (counter >= $ss.children().length - 1) { 
     counter = 0; 
    } else { 
     counter++; 
    } 
    $ss.animate({'scrollTop': (counter * 66) + 'px'}, 1000); 

} 

setInterval(gotoNextSlide, 3000);