是否可以使此代码随机化幻灯片的图像

发布于 2024-12-08 22:50:36 字数 969 浏览 0 评论 0原文

这里我有一些代码，这是我的幻灯片，我想知道你是否可以随机化图像，这样当你刷新页面时它就不会在同一张图像上开始。

请向我提供有用的信息，如果您愿意，请随时向我展示。

谢谢大家！ :)

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

原文

Here i have some code which is my slideshow and what i am wondering is whether you can randomize the images so it doesn't start on the same image when you refresh the page.

Please provide me with useful info and if you wish to show me feel free.

THNAKS GUYS! :)

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

分享到QQ

分享到微博

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

发布评论

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

爱的故事 2024-12-15 22:50:36

例如，您可能希望将图像网址保存在变量中（或者从 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>

You may want to hold image urls in a variable (or retrieve them from your div and clear the div afterwards), say

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

(or even better - do some preloading). Then do a random sort

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

then dynamically add images

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

and then do the slideshow. The final script may look like this:

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

往事风中埋 2024-12-15 22:50:36

$("#myslides img").each(function() { 
      if (Math.random() >= 0.5) { $("#myslides").append($(this)); } 
});

$("#myslides img").each(function() { 
      if (Math.random() >= 0.5) { $("#myslides").append($(this)); } 
});

回复收藏 0 原文

宫墨修音 2024-12-15 22:50:36

这只是 jQuery 循环拥有的众多选项之一。

将 random: true 添加到选项中，如下所示：

$(document).ready(function(){
    $('#myslides').cycle({
        fx: 'fade',
        speed: 2000,
        timeout: 2000,
        random: true
    });
});

This is just one of the many options that jQuery cycle has.

Add random: true to the options like so:

$(document).ready(function(){
    $('#myslides').cycle({
        fx: 'fade',
        speed: 2000,
        timeout: 2000,
        random: true
    });
});

回复收藏 0 原文

~没有更多了~