jquery相册

以下是使用jQuery创建相册的几种常见方法，结合图片展示、切换效果和交互功能：

基础相册实现

HTML结构

<div class="gallery">
  <img src="thumbnail1.jpg" data-full="image1.jpg" class="thumbnail">
  <img src="thumbnail2.jpg" data-full="image2.jpg" class="thumbnail">
  <div class="lightbox">
    <span class="close">&times;</span>
    <img class="full-image" src="">
  </div>
</div>

CSS样式

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
}
.full-image {
  max-width: 80%;
  max-height: 80%;
  margin: 5% auto;
  display: block;
}

jQuery代码

$(document).ready(function(){
  $('.thumbnail').click(function(){
    var fullImage = $(this).attr('data-full');
    $('.full-image').attr('src', fullImage);
    $('.lightbox').fadeIn();
  });

  $('.close').click(function(){
    $('.lightbox').fadeOut();
  });
});

带导航的相册

增强版HTML

<div class="gallery-container">
  <div class="main-image">
    <img src="image1.jpg" id="current-image">
  </div>
  <div class="thumbnails">
    <img src="thumb1.jpg" data-full="image1.jpg">
    <img src="thumb2.jpg" data-full="image2.jpg">
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

jQuery导航功能

var currentIndex = 0;
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

$('.next').click(function(){
  currentIndex = (currentIndex + 1) % images.length;
  $('#current-image').attr('src', images[currentIndex]);
});

$('.prev').click(function(){
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  $('#current-image').attr('src', images[currentIndex]);
});

$('.thumbnails img').click(function(){
  $('#current-image').attr('src', $(this).attr('data-full'));
});

动画效果增强

添加过渡动画

$('#current-image').hide().attr('src', newImage).fadeIn(500);

滑动效果

$('.gallery-container').animate({scrollLeft: targetPosition}, 600);

响应式相册

窗口调整处理

$(window).resize(function(){
  $('.full-image').css({
    'max-width': $(window).width()*0.8,
    'max-height': $(window).height()*0.8
  });
});

插件推荐

1. Lightbox2
   简单易用的灯箱插件，支持键盘导航和动画效果

2. Slick Carousel
   响应式轮播插件，支持多种滑动效果

3. Magnific Popup
   高性能灯箱插件，支持多种内容类型

4. Fancybox
   功能丰富的相册解决方案，支持视频和iframe

   

实现时可根据需求选择原生jQuery开发或现有插件。原生开发灵活性高，插件方案能快速实现复杂功能。注意移动端触摸事件处理和性能优化，大图建议使用延迟加载技术。