2010-11-25 4 views
2

Мне было интересно, есть ли у кого-нибудь что-то простое, чтобы создать галерею из кучи div. Такие какjquery - сделать простую галерею из кучки DIVs

<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 переходит к следующему слайду. И в конце он возвращается к первому.

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

Благодаря Скотт

UPDATE:

Хорошо, я решил просто написать мой собственный на основе 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(); 
    } 
    }); 
}); 
+0

увидеть, если это то, что вы хотите Http: //www.allposters. com /, есть слайдер, который мы сделали недавно – kobe 2010-11-25 19:49:51

+0

, есть примеры, доступные здесь http://vandelaydesign.com/blog/web-development/jquery-image-galleries/ – kobe 2010-11-25 19:50:36

+0

Вы видели пример на allposters.com, я могу объяснить y ou howit делается. – kobe 2010-11-25 20:00:36

ответ

Смежные вопросы