在這個jQuery幻燈片中隨機化圖像

有沒有一種方法來隨機化這個jQuery幻燈片中的圖像，所以每次頁面刷新時它不會以相同的圖像開始？在這個jQuery幻燈片中隨機化圖像

下面是HTML：

<div id="slideshow"> 

<img src="http://image.jpg" alt="image 1" class="active"> 
<img src="http://image.jpg" alt="image 2" > 
<img src="http://image.jpg" alt="image 3" > 

</div>

這裏是腳本：

function slideSwitch() { 
var $active = $('#slideshow IMG.active'); 

if ($active.length == 0) $active = $('#slideshow IMG:last'); 

var $next = $active.next().length ? $active.next() 
    : $('#slideshow IMG:first'); 

$active.addClass('last-active'); 

$next.css({opacity: 0.0}) 
    .addClass('active') 
    .animate({opacity: 1.0}, 6000, function() { 
     $active.removeClass('active last-active'); 

    }); 
} 

$(function() { 
setInterval("slideSwitch()", 8000); 
});

謝謝!!!!

來源

2013-01-21 user1931012

您可以在滑動切換功能中嘗試'Math.random（）'。使其在0和2之間生成並使用它來索引圖像 – Saju

不，因爲您的圖像被硬編碼到您的HTML中。您可以在加載頁面時獲得javascript來切換它（image1會始終顯示一秒鐘），或者您可以讓javascript將這些圖片元素放在一起，並隨機分配哪個圖片用於「.active」類。 – George

你可以隨機分配active類圖片標記在頁面加載，如：

$(document).ready(function() { 
    $("#slideshow img").removeClass("active"); 
    randomDiv = $("#slideshow img").get().sort(function(){ 
    return Math.round(Math.random())-0.5 
    }).slice(0,1); 
    $(randomDiv).addClass("active"); 
});

，這樣每次新的img標籤變得活躍類，並且將來自img標籤

來源

2013-01-21 10:51:48

首先定義啓動所有圖像都按編號分類。說'圖像1'，'圖像2'，'圖像3'等。不要爲任何圖像定義活動類。然後使用此代碼隨機給出任何圖像「活動」類。

$(document).ready(function() { 
    var random = 1 + Math.floor(Math.random() * 3); 
    $('.image ' + random).addClass('active'); 
})

如果有 'n' 個數量的圖像，使用VAR隨機= 1 + Math.floor（的Math.random（）* N）;

來源

2013-01-21 10:56:05 user1995997

在這個jQuery幻燈片中隨機化圖像

回答

相關問題