在jQuery中循环图像-随机化吗？

我有一个站点有一个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>

我使用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>

$（文档）.ready（函数（）{
$（'.slideshow'）。循环({
fx:'淡入'，//选择过渡类型，例如：淡入、向上滚动、洗牌等。。。
超时：7000，
之后：函数（）{
$（'.caption'）.html（this.alt）；
}
});
});

---

问题是页面当然总是从第一个图像开始，是否有一种方法将其随机化一点，以便它可以开始一个随机图像，而不是总是从

a_pic1.jpg

开始？

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

<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>

---

你试过这个吗？我没试过运行这个，但你明白了

<script type="text/javascript">
    $(document).ready(function () {

        $('.slideshow img').get(random()*($('.slideshow img').length-1)).addClass('first');
        $('.slideshow').cycle({
        ....

$（文档）.ready（函数（）{
$（'.slideshow img'）.get（random（）*（$（'.slideshow img'）.length-1））.addClass（'first'）；
$（'.slideshow'）。循环({
....

在jQuery循环中将

随机设置为
1

random:0，//对于random为true，对于sequence为false（不适用于shuffle fx）

$（文档）.ready（函数（）{
$（'.slideshow'）。循环({
fx:'淡入'，//选择过渡类型，例如：淡入、向上滚动、洗牌等。。。
超时：7000，
之后：函数（）{
$（'.caption'）.html（this.alt）；
},
随机：1/在调用
.cycle（）
之前，您可以执行以下操作：

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

保留class='first'位，然后运行此代码以随机化获取class='first'的图像

<script type="text/javascript">
    $(document).ready(function () {

        $('.slideshow img').get(random()*($('.slideshow img').length-1)).addClass('first');
        $('.slideshow').cycle({
        ....

$(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
    });
});

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

$(function(){
   var rnd = Math.floor(Math.random() * $('.slideshow img').length);

   $('.slideshow img').eq(rnd).addClass("first");           
});