Jquery слайд-шоу изображений случайное отображение изображений - PullRequest
Новая
       0

Jquery слайд-шоу изображений случайное отображение изображений

2 голосов
/ 27 января 2011

Я использую слайд-шоу по ссылке:

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]);

Но я застрял с тем, что делать дальше ... помогите !!

Ответы [ 3 ]

4 голосов
/ 27 января 2011

Вы можете рандомизировать порядок элементов LI с помощью этого замечательного плагина JQuery shuffle от James Padolsey.

Я недавно использовал его в проекте, и он очень хорошо работал для моих нужд.

Кроме того, его источник очень легко читается (поэтому его легче понять).

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

Чтобы использовать это в контексте слайд-шоу, вы можете использовать плагин JQuery Cycle от Mark Alsup. Сначала перемешайте дом, затем запустите слайд-шоу: 

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

});
</script>
1 голос
/ 27 января 2011

Код, который вы использовали для слайд-шоу, слишком велик. это можно сделать гораздо проще. Посмотрите этот пример слайд-шоу со случайными изображениями: 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>
1 голос
/ 27 января 2011

Вот еще один плагин 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
});
...