Непрерывно исчезать список миниатюр друг над другом с помощью Jquery (только показывать 4 постоянно?) - PullRequest
Новая
       2

Непрерывно исчезать список миниатюр друг над другом с помощью Jquery (только показывать 4 постоянно?)

2 голосов
/ 09 сентября 2011

Я не совсем уверен, как справиться с этим.Я проверил плагин jQuery "Cycle", но не видел примеров того, что мне действительно нужно.

Как бы вы достигли выцветания в списке миниатюр из HTML (может быть что-то вроде: 

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

Я создал образец .GIF, чтобы объяснить, что я пытаюсь сделать: enter image description here

-В общей сложности отображается 4 поля.

- Запрос вытянет следующее изображение из списка и отобразит его в одном из 4 полей (случайным образом).бокс каждый раз). (изображение будет появляться поверх последнего изображения в блоке).

-Это должно произойти, если в списке более 4 изображений (оставайтесь неизменными, если у нас только 4)

-Хотелось бы иметь возможность добавлять больше изображений через HTML, а не внутри JS ...

---- ОБНОВЛЕНИЕ ------ Кажется, Калле правильноРешение, единственное, чего не хватает, так это возможности контролировать, сколько видимых миниатюр вы видите постоянно.

Ответы [ 6 ]

4 голосов
/ 13 сентября 2011

Я работал 5 (+ 2, версия 1.1) часов на ваш вопрос.Самой большой проблемой было переключение между двумя элементами.Оказывается, что нет никакой функции «подкачки». Так что я сделал альтернативу. Вы не можете сделать этот переход затухания лучше, но он довольно близок к вашему GIF.Если вы хотите просто поменять их красиво и грязно, без какого-либо выцветания ... тогда это очень легко сделать.

В любом случае, я написал плагин:

JoeShuffle v1.1

Простой плагин jQuery для перемешивания списка.Очень прост в установке и использовании.Работает как любой другой плагин jQuery.Просто добавьте jQuery на свою страницу, включите скрипт с необходимым CSS-файлом.Затем позвоните в какой-нибудь список и вуаля!Вы можете изменить интервальную скорость следующим образом: $('#JoeShuffle').JoeShuffle({intervalSpeed: 2000});

Начиная с Ver 1.1 также рандомизирует список при первой загрузке и позволяет подключить этот скрипт к нескольким спискам.Также вы можете установить макс.количество отображаемых элементов:
$('#JoeShuffle').JoeShuffle({displayElements: 4});.

JoeShuffle v1.1 [ Загрузить (33,54 КБ) - Просмотреть демонстрацию (jsfiddle)]
JoeShuffle v1.0 [ Загрузить (65,12 КБ) - Просмотреть демонстрацию (jsfiddle)]

ПРИМЕЧАНИЯ

Я не уверен, насколько он кроссбраузер, а также он очень грязный и сырой плагин.Конечно, можно использовать некоторую оптимизацию, однако она работает.
В моих примерах используются красочные рамки, но на самом деле не имеет значения, есть ли изображения или что-то еще в элементе li.

Некоторые функции:

  • Помнит последний слот / позицию, где был сделан обмен, и больше не будет его использовать.В противном случае это будет выглядеть странно
  • Вы можете установить свой собственный интервал-скорость
  • Перемешивать все, что вы положили между тегами списка.Тем не менее, вы должны держать их все в одном размере
  • (v1.1) Рандомизирует все элементы в списке ul при первой загрузке.
  • (v1.1) Позволяет установить макс.количество одновременно отображаемых элементов
  • (v1.1) Позволяет подключить этот скрипт сразу к нескольким спискам

В настоящее время он работает следующим образом.Что бы вы ни положили внутрь элементов li, они их перемешают.Если у вас есть 5 элементов, то он будет скрывать один.А затем, в основном, возьмите скрытый элемент и поменяйте его местами с каким-то случайным элементом.Тем не менее, я вернусь к нему через ~ 15 часов и добавлю опцию, чтобы вы могли установить, сколько отображается.Таким образом, на самом деле в списке может быть 10 элементов, но одновременно будет отображаться только 4, чтобы сделать рандомизацию более динамичной.

Rev 1 примечания

Так как вы хотели рандомизировать их при первой загрузке.Затем я добавил к этому сценарию плагин rand() .Таким образом, он делает первый цикл hide() очень аккуратным, а также работает в качестве рандомизатора в полном списке ... даже если бы он думал, что на самом деле список не рандомизируется отдельно ... это означает, что он работает быстрее.Как я уже упоминал в комментариях внутри скрипта, rand() плагин * Alexander-Wallin должен быть в вашей коллекции jQuery.

Как видите, вы можете подключить его к несколькимсписки отныне.Это, а также добавление дополнительных элементов в список породило новую проблему.То, что скрипт загружался медленно, и все элементы будут отображаться в течение нескольких мс при первой загрузке.Я исправил проблему, добавив скрипты включительно внутрь <head>, а не после содержимого страницы.Таким образом, скрипты загружаются раньше элементов ... и это означает, что все гладко.

Хотя я понятия не имею, что произойдет, если опция displayElements установлена ​​ниже, то фактические элементы учитываются внутри списка.Лучше избегайте таких ситуаций.

Также, если вы заметили, что элементы объединяются в CSS.Вы также можете использовать display: inline-block;, но inline-block не очень кроссбраузер, поэтому я использовал float.Это, однако, означает, что под элементами у вас должно быть clear: both; в некоторой форме. Или, может быть, даже некоторая оболочка вокруг списка.

2 голосов
/ 14 сентября 2011

Итак, у меня есть jsFiddle с гораздо большим количеством настроек, но я публикую здесь только небольшую часть кода.Я не использовал изображения только <li> элементов с фоновыми цветами. 

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);
};

У jsFiddle есть опции для других способов получения случайного изображения и возможность изменить настройки, и это показывает больше детей.
Текущий jsfiddle: - http://jsfiddle.net/Nft5a/42/

2 голосов
/ 13 сентября 2011

Теперь это не предварительно заполняет элементы div изображениями, и не обрабатывает ввод кода ссылки с изображениями, когда они отображаются, но вы можете справиться с этим, выполнив немного больше работы. 

<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>
2 голосов
/ 09 сентября 2011

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

Концепция похожа: захватить элемент в списке, выполнить действие, перейти к следующему элементу и, если это конец; вернуться к началу. 

$('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);
    });
}
2 голосов
/ 09 сентября 2011

http://jsfiddle.net/MbQrw/

Это должно охватывать основные вещи, которые вам нужны. Это не очень элегантно, и такие вещи, как инициализация отсутствуют, но основной метод показан.

0 голосов
/ 15 сентября 2011

Это было какое-то время, но, возможно, это сработает для определения проблемы с числом изображений:

что я хотел бы сделать, это сделать немного математики, но, скажем, я хочу, чтобы 4 изображения показывались всегдаони размером 50px без полей и отступов (поля и отступы - вот где математика действительно вступает в игру), тогда я бы поместил их в div шириной 200px (4 * 50) с переполнением, установленным в html (где вашсписок должен быть с изображениями).это объясняется немного подробнее в этом вопросе: "http://web.enavu.com/tutorials/making-an-infinite-jquery-carousel/" надеюсь, что это поможет.

...