jQuery random fading images (from siblings) in random divs (with specific class)

I wanted a script to fade in and out of images within a div using jQuery. I'm using the following code (from http://jonraasch.com/blog/a-simple-jquery-slideshow): function slideSwitch() { var $active = $('div.box1 img.active'); if ( $active.length == 0 ) $active = $('div.box1 img:last'); var $sibs = $active.siblings('img'); var rndNum = Math.floor(Math.random() * $sibs.length ); var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); This script works well at the moment and selects randomly from images that are siblings from within the div.box1. In addition to this I decided I also wanted it to first select a random div from those with a class "boxgrid" (instead of a specific class like .box1) on the page (there are 6 container divs with the .boxgrid class applied) which are containers for the images. i.e. I first want to randomly select a .boxgrid div and THEN within that selected div go on and select a random image as per the above script and fade to the next one. Here's the xhtml I'm using:

Header

Text goes here...

Attempting this myself (i'm not a programmer obviously - but I'm trying) I've come up with the following: function slideSwitch() { var $randbox = $('div.boxgrid').siblings(); var rndBox = Math.floor(Math.random() * $randbox.length ); var $active = $( $randbox[ rndBox ] ); if ( $active.length == 0 ) $active = $('img:last'); var $sibs = $active.siblings('img'); var rndNum = Math.floor(Math.random() * $sibs.length ); var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); I'm looking for a bit of help with this one as I'm struggling to get it to select a random div.boxgrid and THEN fade the image in it randomly as in the original script. Am I close? Any help would be greatly appreciated. Thanks.

以上就是jQuery random fading images (from siblings) in random divs (with specific class)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏