Continuously fade a list of thumbnails on top of each other w/ Jquery (only showing 4 at all times?)_问答_开发者

I'm not exactly sure how to tackle this one. I've checked out the jQuery "Cycle" plugin, but haven't seen any exmaples of what I really need.

How would you achieve fading in a list of thumbnails from the HTML (maybe something like:

<ul id="container">
    <li class="thumbnail"> <a href="www.link1.com"> <img src="1.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link2.com"> <img src="2.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link3.com"> <img src="3.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link4.com"> <img src="4.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link5.com"> <img src="5.jpg"/></a> </li>
     ...more
</ul>

I've created a sample .GIF to explain what i'm trying to do:

Continuously fade a list of thumbnails on top of each other w/ Jquery (only showing 4 at all times?)

-There are a total of 4 boxes showing at all times

-Jquery will pull the next image on the list, and fade it into one of the 4 boxes (random box every time). (image will fade in over the last image in the box).

-This should only happen if there are more than 4 images inside the list. (stay static if we only have 4)

-Would like to have the ability to add more images via HTML, not inside the JS...

----UPDATE------ Kalle seems to have the correct soluti开发者_如何转开发on, the only thing missing is the ability to control how many visible thumbnails you see at all times.

I worked 5 (+ 2, ver 1.1) hours on your question. The biggest problem was the switch between two elements. It turns out, that there isn't any "swapping" function.. So I made an alternative.. You cant make this fading transition any better, but it is fairly close your GIF. If you want just to swap them nice and dirty, without any fade.. then that's very easy to make.

Anyways, I composed into a plugin:

JoeShuffle v1.1

A simple jQuery plugin to shuffle list. Very easy to install and use. Works like any other jQuery plugin. Just add jQuery to your page, include the script with necessary css file. Then, call it to some list and voila! You can change the interval-speed like this: $('#JoeShuffle').JoeShuffle({intervalSpeed: 2000});

As of Ver 1.1 also randomizes the list on the first load and enables to have this script hooked to multiple lists. Also you can set the max. number of displayed elements:
$('#JoeShuffle').JoeShuffle({displayElements: 4});.

^{JoeShuffle v1.1 [ Download (33.54 KB) - View demo (jsfiddle) ]}
^{JoeShuffle v1.0 [ Download (65.12 KB) - View demo (jsfiddle) ]}

NOTES

I'm not sure how crossbrowser it is and also it is very dirty and raw plugin. Surely could use some optimization, however it does work.
My examples use colorful boxes, but it really doesn't matter if there are images or whatever in the li element.

Some features:

Remembers the last slot/position, where the swap was made, and wont use it again. Otherwise it will look kinda a weird
You can set your own custom interval-speed
Shuffles whatever you put between the list tags. However, you should keep all of them in one size
(v1.1) Randomizes all the elements in the ul list on the first load.
(v1.1) Allows you to set the max. number of elements displayed at once
(v1.1) Enables you to have this script hooked to multiple lists at once

Currently it works like this. Whatever you put inside the li elements, it will shuffle them. If you have 5 elements, then it will hide one. And then basically take the hidden element and swap it with some random element. However, I will revisit it in ~15 hours and add the option, that you can set how many are being displayed. So you can actually have 10 elements in the list, but you will only display 4 at the time, there for making the randomization more dynamic.

Rev 1 notes

Since you wanted to randomize them on the first load. Then I added the rand() plugin to this script. This way it makes the first hide() loop very neat and also works as randomizer on the full list..even thought it actually doesn't randomize the list separately..meaning its faster. As I mentioned in the comments inside the scrip, rand() plugin by Alexander Wallin, is a must have in your jQuery collection.

As you can see, you can hook it to multiple lists from now on. That and also adding more elements to the list came up a new problem. That the script was loading slow and all the elements would be shown for few ms, on the first load. I fixed the problem, by adding the scripts includes inside the <head> and not after the contents of the page. This way the scripts get loaded before the elements.. and that means everything is smooth.

Though I have no idea what happens, if the displayElements option is set lower, then the actual elements count inside the list. Best avoid such situations.

Also if you noticed that the elements get floated together in CSS. You could also use display: inline-block;, but inline-block isn't very crossbrowser, so I used float. This however means, that under the elements you should have clear: both; in some form.. Or maybe even some wrapper around the list.

http://jsfiddle.net/MbQrw/

This should cover the basic stuff you're needing. It's not very elegant and stuff like initialization is missing, but the main technique is shown.

http://jsfiddle.net/rkw79/VETmf/

The concept is similar: grab an element in a list, do an action, move onto the next element, and if it is the end; loop back to the beginning.

$('input').click(function (e) {
    toggleImg($('div img:first'));
});

function toggleImg(I) {
    var nextI = I.next();
    if (nextI.length == 0) nextI = $('div img:first');
    I.toggle('slow', function() {
        toggleImg(nextI);
    });
}

Now this doesn't pre-populate the divs with images and it doesn't handle getting the link code in with the images as they display but you can handle that with just a little extra work.

<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script>
var maxDisplay = 4;
var displayBox;

$(document).ready(function() {

  StartShow();

});

function StartShow() {
    var interval = 5000;
    var slideShowID;

    slideShowID = setInterval(Gallery, interval);

}

function Gallery() {
  var nextImage = $("#container li.selected").next().length;
  displayBox = Math.floor(Math.random() * maxDisplay);
  if (nextImage > 0){
    $("#container li.selected").removeClass("selected").next().addClass("selected");
    imgSrc = $("#container li.selected").children().attr("src");
    if(imgSrc != null) {
      $("#" + displayBox).fadeOut('slow', function() { $("#" + displayBox).css("background-image", imgSrc); }).fadeIn();
    }
  }
  else {
    $("#container li.selected").removeClass("selected").siblings(':first').addClass("selected");
    imgSrc = $("#container li.selected").children().attr("src");
    if (imgSrc != null) {
      $("#" + displayBox).fadeOut('slow', function() { $("#" + displayBox).css("background-image", imgSrc); }).fadeIn();
    }
  }
}
</script>
</head>
<body>

<ul id="container" style="display: none;">
    <li class="thumbnail selected"> <a href="www.link1.com"><img src="1.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link2.com"><img src="2.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link3.com"><img src="3.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link4.com"><img src="4.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link5.com"><img src="5.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link6.com"><img src="6.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link7.com"><img src="7.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link8.com"><img src="8.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link9.com"><img src="9.jpg"/></a> </li>
</ul>


<div>
 <div id="1"></div>
 <div id="2"></div>
 <div id="3"></div>
 <div id="4"></div>
</div>

</body>
</html>

So I have a jsFiddle with much more in the way of settings but i'm only posting the sinmplest part of the code here. I didn't use images just <li> elements with background colours.

var floor = Math.floor;
var random = Math.random;
function randomindex(num, style) {
    return floor(random() * num);
};
$.fn.continuousFade = function(options) {
    var settings = $.extend({
        "max_visible": 4,
        "delay": 2000, // in ms.
        "speed": 500, // in ms.
        "style": "normal"
    }, options);

var children = this.children(".thumbnail").css("display", "");

for (var i = 0; i < settings.max_visible; i++) {
    children.eq(i).css("display", "inline-block");
}
function fadeone() {

        var visibleChild = this.children(".thumbnail:visible").eq(randomindex());
        var hiddenChild = this.children(".thumbnail:not(:visible)").first();

        var parent = this;

        visibleChild.before(hiddenChild);
        hiddenChild.css({
            "position": "absolute",
            "opacity": 0,
            "display": "inline-block"
        }).animate({
            opacity: 1
        }, settings.speed, function() {
            hiddenChild.css("position", "");
            parent.append(visibleChild.css("display", "")); // Need to put this one at the end so it will get displayed again last.
        });
        setTimeout(function() {
            fadeone.call(parent);
        }, settings.delay);
    }
    fadeone.call(this);
};

The jsFiddle has options for other ways of getting a random image and the ability to change the settings and it shows more children.
Current jsfiddle:- http://jsfiddle.net/Nft5a/42/

It's been a while, but maybe this will work for your defining # of images problem:

what I would do involves doing a bit of math, but say I want 4 pictures showing at all times, and they are 50px each with no margin or padding (margins and padding is where the math really comes into play) then I would put them in a div that is 200px wide (4*50) with overflow set to hidden in the html (where your list should be with the images). this is explained a bit more in this question: "http://web.enavu.com/tutorials/making-an-infinite-jquery-carousel/" hope that helps.