开发者

sort divs by the number, no randomize

I found this great script: jsfiddle

Over here: Showing random divs using Jquery

The problem is that on reload the divs are randomized. I need the divs to show as they are sorted in the html, like 1,2,3,4 etc. And than of开发者_StackOverflow course cycle back starting over from div1.


Here's a version that works between page reloads, using the cookie plugin:

JavaScript:

var divIndex = $.cookie('div_index') || -1;
var divs = $('.Image');
divIndex = (parseInt(divIndex, 10) + 1) % divs.length;
divs.eq(divIndex).show();
$.cookie('div_index', divIndex);

Example: http://jsfiddle.net/RJMhT/124/


Try using the cycle plugin:

Updated JavaScript:

$("#slideshow").cycle();

Markup:

<div id="slideshow">
    <div class="Image"><img src="/image1.jpg">1</div>
    <div class="Image"><img src="/image2.jpg">2</div>
    <div class="Image"><img src="/image3.jpg">3</div>
    <div class="Image"><img src="/image4.jpg">4</div>
    <div class="Image"><img src="/image5.jpg">5</div>
    <div class="Image"><img src="/image6.jpg">6</div>
    <div class="Image"><img src="/image7.jpg">7</div>
</div>

Example: http://jsfiddle.net/RJMhT/120/


If you want to do this:

when reload, show 1, then reload, show 2, then reload, show 3.....

you may have to use some cache technique such as localStorage to store the index of the last div, then when reload, read the last index from localStorage, calculate the next index, show it.


Edit: I think I misunderstood your question. You want a different image to load each time you actually reload the page? Seems like an odd request. Let me think about it.

Answer http://jsfiddle.net/morrison/RJMhT/133/

Features:

  • Uses kittens for images. (My favorite feature).
  • Uses the jQuery cookie plug-in when localStorage fails.
  • Properly cycles through a dynamic amount of images.

Answer: http://jsfiddle.net/morrison/RJMhT/123/

Features:

  • Uses kittens for images. (My favorite feature).
  • Uses the jQuery cycle plug-in.
  • When it hits the last one, it goes back to the first. This is default for cycle.
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜