在jQuery中循环图像-随机化它

Question

我有一个网站，有一个div，里面有一些图片:

 <div class="slideshow">
            <img src="lib/images/grid/slideshow/a-960x305/a_pic1.jpg" width="960" height="305" alt="1" class="first" />
            <img src="lib/images/grid/slideshow/a-960x305/a_pic2.jpg" width="960" height="305" alt="2" />
            <img src="lib/images/grid/slideshow/a-960x305/a_pic3.jpg" width="960" height="305" alt="3" />
            <img src="lib/images/grid/slideshow/a-960x305/a_pic4.jpg" width="960" height="305" alt="4" />
  </div>

注意，第一个图像有一个类名first。这样页面一次只能通过css:

显示一个图像

CSS:

/*begin slideshow*/
div.slideshow                              { margin:0 0 5px 0; /*height:305px;*/ } /*for the jQuery cycle plug in*/
div.slideshow img                          { display:none;}
div.slideshow img.first                    { display:block;}
.caption                                   { text-align:center; font-weight:bold; color:#1F7FB6;}
/*end slideshow*/

我使用jquery循环库循环通过图像，像这样:

 <script type="text/javascript">
        $(document).ready(function () {
            $('.slideshow').cycle({
                fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                timeout: 7000,
                after: function () {
                    $('.caption').html(this.alt);
                }
            });
        });
    </script>

问题是页面当然总是从第一张图像开始，有没有办法随机化这一点，这样它就可以开始一个随机的图像，而不是总是从a_pic1.jpg开始?

Answer 1

在jQuery循环选项中设置random为1

random: 0，//随机为true，序列为false(不适用shuffle fx)

$(document).ready(function () {
    $('.slideshow').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        timeout: 7000,
        after: function () {
            $('.caption').html(this.alt);
        },
        random: 1 // <-- add this
    });
});

Answer 2

我不熟悉循环库，但是这里有一个使用数组的例子:

<script>
var banners = new Array("#banner1","#banner2","#banner3","#banner4");
var counter = //random number between 0-3;
$(document).ready(function()
{
    nextBanner();
});

function nextBanner()
{
    var currentBanner = counter;
    counter++;
    if (counter > banners.length -1)
    {
        counter = 0;
    }
    $( banners[currentBanner] ).fadeOut(300 );
    setTimeout('$( banners[counter] ).fadeIn( 300)', 100);
    setTimeout("nextBanner()", 9000);
}
</script>
<div id="banner1" class="banner-item">      
    <img src="/banner1.jpg" />
</div>
<div id="banner2" class="banner-item" style="display: none;">       
    <img src="banner2.jpg" />
</div>

.

css

.banner-item
{
    position: absolute; 
}

Answer 3

在调用.cycle()之前，您可以这样做:

var images = $('.slideshow > img');
images.get(0).removeClass("first");
images.get(Math.floor(Math.random() * images.length)).addClass("first");

Answer 4

去掉class="first"位，然后运行下面的代码随机化得到class="first"的图像

$(function(){
   var rnd = Math.floor(Math.random() * $('.slideshow img').length);
   $('.slideshow img').eq(rnd).addClass("first");           
});

Answer 5

你试过了吗?我还没有试着运行这个，但是你应该明白了。

<script type="text/javascript">
    $(document).ready(function () {
        $('.slideshow img').get(random()*($('.slideshow img').length-1)).addClass('first');
        $('.slideshow').cycle({
        ....