Возможно ли сделать этот код случайным образом изображения для слайд-шоу - PullRequest
Новая
       1

Возможно ли сделать этот код случайным образом изображения для слайд-шоу

0 голосов
/ 11 октября 2011

Здесь у меня есть какой-то код, который является моим слайд-шоу, и меня интересует, можете ли вы рандомизировать изображения, чтобы они не запускались на одном изображении при обновлении страницы.

Пожалуйста, предоставьте мне полезную информацию, и если вы хотите показать мне, не стесняйтесь.

СПАСИБО, ПАРНИ! :) 

<html>
<head>
<title>JQuery Cycle Plugin Sample</title>
<link rel="stylesheet" type="text/css" media="screen" href="../screen.css" />
<script type="text/javascript" src="../js2/jquery-1.3.js"></script>
<script type="text/javascript" src="../js2/jquery.cycle.all.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#myslides').cycle({
            fx: 'fade',
            speed: 2000,
            timeout: 2000
        });
    }); 
</script>
</head>
<body>
<div id="myslides"> 
    <img src="../images/capitol.jpg" />
    <img src="../images/flowers.jpg" />
    <img src="../images/countryscene.jpg" />
    <img src="../images/heartkush.jpg"/>
</div>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 11 октября 2011

Возможно, вы захотите сохранить URL-адреса изображений в переменной (или получить их из вашего div и затем очистить div), скажем 

var images = ['x.jpg', 'y.jpg', 'z.jpg'];

(или даже лучше - выполнить некоторую предварительную загрузку),Затем выполните случайную сортировку 

function randomOrd(a,b)
{
   return (Math.round(Math.random())-0.5);
}
images.sort(randomOrd);

, затем динамически добавьте изображения 

for (var i in images)
{
   $('#myslides').append('<img src="'+images[i]+'" />');
}

и затем выполните слайд-шоу.Окончательный сценарий может выглядеть так: 

<script>
    function randOrd(a,b)
    {
        return (Math.round(Math.random())-0.5);
    }
    $(document).ready(function(){
        var images = [];
        /* retrieve images */
        $('div#myslides img').each(function(){
            images.push($(this));
        });
        /* clear the div */
        $('div#myslides').empty();
        /* do the random sort of images */
        images.sort(randOrd);
        /* append to the div sorted images */
        for (var i in images)
        {
            $('div#myslides').append(images[i]);
        }
        /* do the slideshow */
        $('#myslides').cycle({
            fx: 'fade',
            speed: 2000,
            timeout: 2000
        });
    });
</script>
0 голосов
/ 12 октября 2011

Это только одна из многих опций , которые есть в цикле jQuery.

Добавьте random: true к таким опциям: 

$(document).ready(function(){
    $('#myslides').cycle({
        fx: 'fade',
        speed: 2000,
        timeout: 2000,
        random: true
    });
});
0 голосов
/ 11 октября 2011 
$("#myslides img").each(function() { 
      if (Math.random() >= 0.5) { $("#myslides").append($(this)); } 
});
...