jquery - создайте простую галерею из множества DIV - PullRequest
2 голосов
/ 25 ноября 2010

Мне было интересно, есть ли у кого-нибудь что-нибудь простое, чтобы создать галерею из набора элементов div.Например,

<div id=gallery>
    <div class='slide' id=1><img src='image1.png'> this is image 1</div>
    <div class='slide' id=2><img src='image1.png'> this is image 1</div>
    <div class='slide' id=3><img src='image1.png'> this is image 1</div>
    <div class='slide' id=4><img src='image1.png'> this is image 1</div>
</div>

Мне нравится показывать по одному DIV за раз.Нажатие div переводит на следующий слайд.И в конце он возвращается к первому.

Никаких эффектов, просто показ одного деления с последующим следующим.

Спасибо Скотт

ОБНОВЛЕНИЕ:

Хорошо, я решил написать свой собственный на основе http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/.. Любой может сделать этот код более точным и эффективным, пожалуйста, добавьте комментарий.

$(document).ready(function(){
  var currentPosition = 1;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  if(currentPosition==1){ $('.slide').hide(); $('#1').show()};

  // Create event listeners for .controls clicks
  $('.slide')
    .bind('click', function(){
    currentPosition = parseInt($(this).attr('id'));
    if(currentPosition == numberOfSlides) {
        $('.slide').hide(); 
        $('#1').show();
    } else {
        $('.slide').hide();
        nextPosition = parseInt(currentPosition+1);

        $('#'+nextPosition).show();
    }
  });
});

Ответы [ 4 ]

1 голос
/ 25 ноября 2010

На мой взгляд, плагин jQuery Colorbox - лучший!Очень универсальная и стабильная галерея.

http://colorpowered.com/colorbox/

Примеры http://colorpowered.com/colorbox/core/example1/index.html

Реализация в реальном мире: http://www.bakkerbart.nl (если вы нажмете кнопку «bestellen»))

1 голос
/ 25 ноября 2010

Вот аналогичный вопрос, который получил множество ответов: Хороший способ показать html

1 голос
/ 25 ноября 2010

Я изменил свой комментарий как ответ

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/

недавно проверьте нашу реализацию на

www.allposters.com /// здесь есть слайдер

1 голос
/ 25 ноября 2010

Возможно, вы захотите взглянуть на предложенные здесь, чтобы сэкономить время: http://blueprintds.com/2009/01/20/top-14-jquery-photo-slideshow-gallery-plugins/

  • Christian
...