jquery图像幻灯片随机显示图像

发布于 2024-10-14 15:44:52 字数 466 浏览 4 评论 0原文

我正在使用链接中的幻灯片放映：

http://www.alohatechsupport .net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator 。我需要第一张图像也是随机的。我已经为所有像“rand”这样的李上了同一堂课。

var curr=$('div.rotator ul li.rand');
var rc= Math.floor(Math.random() * curr.length);
var current=$(curr[rc]);

然后但我坚持下一步该做什么..请帮助！

原文

I am using a slide show from the link :

http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator .
I need the first image to be also a random one.
I had given a same class for all the li like 'rand'.Then

var curr=$('div.rotator ul li.rand');
var rc= Math.floor(Math.random() * curr.length);
var current=$(curr[rc]);

But i am stuck with what to do next..plz help!!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

万劫不复 2024-10-21 15:44:52

您可以使用 James Padolsey 提供的这个很棒的 JQuery shuffle 插件随机化 LI 元素的顺序。

我最近在一个项目中使用了它，它非常适合我的需求。

另外，它的源代码非常容易阅读（因此更容易理解）。

http://james.padolsey.com/javascript/shuffling-the-dom/

要在幻灯片上下文中使用此功能，您可以使用 Mark Alsup 的 JQuery Cycle 插件。首先随机播放 dom，然后运行幻灯片：

<script>  
 $(document).ready(function() {
    $('.slideshow img').shuffle();
    $('.slideshow').cycle({
        fx: 'fade' 
    });

});
</script>

You can randomize the order of your LI elements using this awesome JQuery shuffle plugin by James Padolsey.

I have used it on a project recently and it worked very well for my needs.

Plus, the source of it is very easy to read (therefore easier to understand).

http://james.padolsey.com/javascript/shuffling-the-dom/

To use this in the context of a slideshow, you could use JQuery Cycle plugin by Mark Alsup. Shuffle the dom first, then run the slideshow:

<script>  
 $(document).ready(function() {
    $('.slideshow img').shuffle();
    $('.slideshow').cycle({
        fx: 'fade' 
    });

});
</script>

回复收藏 0 原文

囍笑 2024-10-21 15:44:52

这是另一个具有相同功能的 jQuery 插件：

http://yelotofu.com/ labs/jquery/snippets/shuffle/demo.html

关闭您提供的演示，您可以在此处下载

http://www.alohatechsupport.net/downloads/image-rotator.zip

确保遵循代码中的这些说明

//Un-comment the 3 lines below to get the images in random order

var sibs = current.siblings();
var rndNum = Math.floor(Math.random() * sibs.length );                      
var next = $( sibs[ rndNum ] );

，然后您的文档就绪部分将如下所示：

$(document).ready(function() {      
    //Load the slideshow
    $('div.rotator ul').shuffle();

    theRotator();
    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
});

Here is another jQuery plugin that does the same ting:

http://yelotofu.com/labs/jquery/snippets/shuffle/demo.html

Going off the demo that you gave that you can download here

http://www.alohatechsupport.net/downloads/image-rotator.zip

Make sure you follow these intstructions in the code

//Un-comment the 3 lines below to get the images in random order

var sibs = current.siblings();
var rndNum = Math.floor(Math.random() * sibs.length );                      
var next = $( sibs[ rndNum ] );

And then below your document ready section will look like:

$(document).ready(function() {      
    //Load the slideshow
    $('div.rotator ul').shuffle();

    theRotator();
    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
});

回复收藏 0 原文

一腔孤↑勇 2024-10-21 15:44:52

您用于幻灯片放映的代码太多了。这可以做得更简单。看看这个带有随机图像的幻灯片示例：http://jsbin.com/iledo3/3

这里粘贴代码供参考：

<!doctype html>
<html>
  <head>
    <title></title>
    <style type="text/css">
    #slideshow-container { height:90px; position:relative; }
    #slideshow-container img { position:absolute; left:0; top:0; width:100%; height:100% }
    #slideshow      { position:absolute; left:0; top:0; width:100%; height:100%; list-style:none }
    #slideshow img  { width:120px; height:90px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 }
    #slideshow      { position:absolute; left:0; top:0; width:100%; height:100%; }
    #slideshow img  { width:120px; height:90px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 } /* adjust this for your images */
    </style>
  </head>
  <body>

    <div id="slideshow-container">
      <div id="slideshow"> 
          <img src="http://dummyimage.com/120x90/f00/fff.png&text=Image+1"> 
          <img src="http://dummyimage.com/120x90/0f0/fff.png&text=Image+2">
          <img src="http://dummyimage.com/120x90/00f/fff.png&text=Image+3">
          <img src="http://dummyimage.com/120x90/ff0/000.png&text=Image+4">
          <img src="http://dummyimage.com/120x90/0ff/fff.png&text=Image+5">
      </div> 
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //extending jQuery with ':random' selector, best put into separate plugin js file
        jQuery.jQueryRandom = 0;
        jQuery.extend(jQuery.expr[":"],
        {
            random: function(a, i, m, r) {
                if (i == 0) {
                    jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
                };
                return i == jQuery.jQueryRandom;
            }
        });        
        //end :random extend

        $(function() {
          $('#slideshow img').not(':random').hide(); //hide all images except one initially
          setInterval(function(){
            $('#slideshow img:visible').fadeOut('slow')
              .siblings('img:random').fadeIn('slow') //find a random image
               .end().appendTo('#slideshow');}, 
            2000); //2 second interval
        });
    </script>
  </body>
</html>

The code you have used for your slideshow is too much. this can be done much simpler. Have a look a this example of a slideshow with random images: http://jsbin.com/iledo3/3

The code pasted here for reference:

<!doctype html>
<html>
  <head>
    <title></title>
    <style type="text/css">
    #slideshow-container { height:90px; position:relative; }
    #slideshow-container img { position:absolute; left:0; top:0; width:100%; height:100% }
    #slideshow      { position:absolute; left:0; top:0; width:100%; height:100%; list-style:none }
    #slideshow img  { width:120px; height:90px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 }
    #slideshow      { position:absolute; left:0; top:0; width:100%; height:100%; }
    #slideshow img  { width:120px; height:90px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 } /* adjust this for your images */
    </style>
  </head>
  <body>

    <div id="slideshow-container">
      <div id="slideshow"> 
          <img src="http://dummyimage.com/120x90/f00/fff.png&text=Image+1"> 
          <img src="http://dummyimage.com/120x90/0f0/fff.png&text=Image+2">
          <img src="http://dummyimage.com/120x90/00f/fff.png&text=Image+3">
          <img src="http://dummyimage.com/120x90/ff0/000.png&text=Image+4">
          <img src="http://dummyimage.com/120x90/0ff/fff.png&text=Image+5">
      </div> 
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //extending jQuery with ':random' selector, best put into separate plugin js file
        jQuery.jQueryRandom = 0;
        jQuery.extend(jQuery.expr[":"],
        {
            random: function(a, i, m, r) {
                if (i == 0) {
                    jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
                };
                return i == jQuery.jQueryRandom;
            }
        });        
        //end :random extend

        $(function() {
          $('#slideshow img').not(':random').hide(); //hide all images except one initially
          setInterval(function(){
            $('#slideshow img:visible').fadeOut('slow')
              .siblings('img:random').fadeIn('slow') //find a random image
               .end().appendTo('#slideshow');}, 
            2000); //2 second interval
        });
    </script>
  </body>
</html>

回复收藏 0 原文

~没有更多了~