通過更改邊距來構建jQuery幻燈片

我試圖從php中的圖像數組創建jQuery幻燈片。我已經設置了html和css，但javascript沒有做任何事情。如果我想要做的事情是不可能的，或者有更好的替代路線，我會很樂意接受這個建議。任何幫助，將不勝感激！通過更改邊距來構建jQuery幻燈片

PHP/HTML

$pic_array = array(); 
$titles = array(); 
$descriptions = array(); 
while ($row = $result->fetch_assoc()) { 
    $pic_array[$count] = $row['pic_url']; 
    $titles[$count] = $row['title']; 
    $descriptions[$count] = $row['description']; 
    $count++; 
} 
echo "<div id='slider'> 
     <ul class='slides'"; 
for ($x=0; $x < count($pic_array); $x++) { 
    echo " <li class='slide'><img src= " . $dir . $pic_array[$x] . " /></li>"; 
} 
echo " </ul> 
     </div";

CSS

#slider { 
    width: 450px; 
    height: 250px; 
    overflow:hidden; 
} 
#slider .slides { 
    display: block; 
    width:10000px; 
    height: 250px; 
    margin:0; 
    padding:0; 

} 
#slider .slide { 
    float: left; 
    list-style-type: none; 
    width: 450px; 
    height: 250px; 
} 
img { 
    width: 450px; 
    height: 250px; 
}

的Javascript

$(function() { 

    setInterval (function() { 
     $('.slider .slides').animate({'margin-top':'-=250px'}, 1000); 
    }, 3000); 
});

來源

2016-06-21 daneh

爲什麼你有兩個週期呢？您可以將_for_循環的內容放入您的_while_循環中。不需要三個數組... –

這三個數組用於標題描述和圖片，我想我可以合併for和while循環，但這並不能解決我的問題。 – daneh

你錯了jQuery選擇。它應該是$('#slider .slides')，因爲slider是一個id，而不是一個類。

而且，你缺少右尖括號中ul元素：...<ul class='slides'>";並在div#slider元素：...</div>";

來源

2016-06-21 19:45:08

感謝那些漁獲，但由於某種原因，它仍然沒有任何東西。 – daneh

當我編輯答案時，您在關閉div＃滑塊標籤時也缺少關閉尖括號。 –

非常感謝！我無法相信我搞砸了所有這一切。 – daneh

通過更改邊距來構建jQuery幻燈片

回答

相關問題