1

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

ありがとう！！！！

4

2 に答える 2

0

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-21T10:51:48.213 に答える
0

最初にすべての画像をクラスで番号別に定義します。「画像 1」、「画像 2」、「画像 3」などと言ってください。どの画像にもアクティブ クラスを定義しないでください。次に、このコードを使用して、画像の「アクティブ」クラスをランダムに指定します。

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

「n」個の画像がある場合は、var random = 1 + Math.floor(Math.random() * n); を使用します。

于 2013-01-21T10:56:05.873 に答える