Jquery Slideshow 加载随机随机图像顺序

发布于 2024-11-08 18:32:04 字数 424 浏览 2 评论 0原文

我有一个简单的 Jquery 幻灯片,它使图像列表一个接一个地淡出。

<script type="text/javascript">

$(function(){
    $('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein :first-child').fadeOut(3000)
     .next('img').fadeIn(3000)
     .end().appendTo('.fadein');}, 
  3000);
});
</script>

我现在想做的就是让它们随机化。由于此幻灯片位于我的页面标题中,因此每次用户导航到不同页面时,幻灯片都会重新从头开始。

我想让图像以随机顺序显示。

任何帮助都会很棒!

I have a simple Jquery slideshow, that fades a list of images one after the other.

<script type="text/javascript">

$(function(){
    $('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein :first-child').fadeOut(3000)
     .next('img').fadeIn(3000)
     .end().appendTo('.fadein');}, 
  3000);
});
</script>

What I want to do now is to make them randomized. As this slideshow is in the header of my page, every time a user navigates to a different page the slideshow starts from the beginning again.

I want to make it so that the images show in random order.

Any help would be great!

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

毁我热情 2024-11-15 18:32:04

尝试使用此逻辑

<body onload="document.body.background = '/images/img'+Math.floor(Math.random()*4)+'.jpg';" />

或尝试使用此函数

$.fn.randomImage = function (){
var $imageNumber = 8, 
// Set the amount of images in the Sprite
$height = $('> div', this).innerHeight(),
$random_num = Math.random() * $imageNumber - 1,
$multiple = Math.round($random_num),
$random = $height * $multiple
jQuery('.image').css( 
{'background-position' : '0px -' + $random + 'px',  'display' : 'block' } 
)};

,然后

jQuery('#image-container').randomImage();

参考

随机图像
另一个

try with this logic

<body onload="document.body.background = '/images/img'+Math.floor(Math.random()*4)+'.jpg';" />

or try with this function

$.fn.randomImage = function (){
var $imageNumber = 8, 
// Set the amount of images in the Sprite
$height = $('> div', this).innerHeight(),
$random_num = Math.random() * $imageNumber - 1,
$multiple = Math.round($random_num),
$random = $height * $multiple
jQuery('.image').css( 
{'background-position' : '0px -' + $random + 'px',  'display' : 'block' } 
)};

and then

jQuery('#image-container').randomImage();

Reference

random images
another

并安 2024-11-15 18:32:04

我在 http://yelotofu.com/labs/jquery 找到的 jQuery 插件/snippets/shuffle/jquery.shuffle.js
可能会成功。它会打乱所有选定的元素。这里还有一个演示: http://yelotofu.com/labs/jquery/snippets /shuffle/demo.html

用法类似于 $('#imagediv').shuffle();

The jQuery plugin I found at http://yelotofu.com/labs/jquery/snippets/shuffle/jquery.shuffle.js
might do the trick. It shuffles all the elements selected. There's also a demo here: http://yelotofu.com/labs/jquery/snippets/shuffle/demo.html.

Usage is like $('#imagediv').shuffle();

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文