jQuery和css3可扩展的图片幻灯片插件

这是一款jQuery和css3可扩展的图片幻灯片插件。我们经常能看到“50%平均分割布局”：屏幕的50%宽是图片，50%宽是文字。这种模式可以在我们这个幻灯片插件中使用。

通常情况下，用户不能和图片进行交互。但是如果你想显示更多的图片该怎么办呢？一个解决方案是在点击时触发一个模态窗口来显示幻灯片。现在通过CSS Transitions为我们提供了更好的用户体验方案。这是一种新的用于扩展图像的方法，通过覆盖相邻的内容和将额外内容向下推进来使其全屏显示，从而将它变成一个全屏幻灯片。

HTML结构

html结构包含两个主要的<div>(.cd-slider-wrapper和.cd-item-info)：。第一个div包含图片幻灯片，第二个div包含一些标题、说明文本等。它们都被包含在 section.cd-single-item中。其他的内容包含在section .cd-content中。

<section class="cd-single-item">
  <div class="cd-slider-wrapper">
    <ul class="cd-slider">
      <li class="selected"><img src="img/img-1.jpg" alt="Product Image 1"></li>
      <li><img src="img/img-2.jpg" alt="Product Image 1"></li>
      <li><img src="img/img-3.jpg" alt="Product Image 2"></li>
    </ul> <!-- cd-slider -->
 
    <ul class="cd-slider-navigation">
      <li><a href="#0" class="cd-prev inactive">Next</a></li>
      <li><a href="#0" class="cd-next">Prev</a></li>
    </ul> <!-- cd-slider-navigation -->
 
    <a href="#0" class="cd-close">Close</a>
  </div> <!-- cd-slider-wrapper -->
 
  <div class="cd-item-info">
    <h2>Produt Title</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    <button class="add-to-cart">Add to cart</button>            
  </div> <!-- cd-item-info -->
</section> <!-- cd-single-item -->
 
<section class="cd-content">
  <!--  other content here -->
</section>
                

注意：幻灯片的前后导航按钮.cd-slider-pagination不是直接插入到Html中，而是在运行时使用jQuery将其插入。

CSS样式

在小屏幕上，css样式十分简单：.cd-slider-wrapper和.cd-item-info都被设置为100%宽度。

在桌面设备上（屏幕大小超过1024px），我们为.cd-item-info设置position: absolute 和width: 50% ，并将其放在屏幕的右边。

对于.cd-slider-wrapper元素，我们设置其width: 50%。当用户点击了图片幻灯片，我们为.cd-single-item添加.cd-slider-active class：.cd-slider-wrapper的宽度将被设置为100%。通过这个方法，.cd-slider-wrapper将变大，覆盖掉.cd-item-info，并将额外内容向下推进。通过在宽度值上使用CSS3 Transition来使动画变得更加平滑。

@media only screen and (min-width: 1024px) {
  .cd-slider-wrapper {
    transition: width 0.4s;
    width: 50%; 
  }
  .cd-slider-active .cd-slider-wrapper {
    width: 100%; 
  } 
}
@media only screen and (min-width: 1024px) {
  .cd-item-info {
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    padding: 60px 60px 0;
  } 
}
                

另外，因为.cd-item-info是position: absolute的，.cd-single-item元素的高度仅仅通过幻灯片图片的高度来设置。因此，.cd-item-info要比幻灯片图片的高度要小。

JAVASCRIPT

我们通过jQuery来在用户点击图片时切换到幻灯片模式。另外，我们为幻灯片实现一个基本的滑动方案（可以通过键盘和触摸导航，拥有前后导航和按钮导航）。

jQuery(document).ready(function($){
  var itemInfoWrapper = $('.cd-single-item'),
    slides = $('.cd-slider li'),
    slidesWrapper = $('.cd-slider'),
    // create slider pagination
    sliderPagination = createSliderPagination(slides);
  slidesWrapper.on('click', function(event){
    //enlarge slider images 
    if( !itemInfoWrapper.hasClass('cd-slider-active') && $(event.target).is('.cd-slider')) {
      itemInfoWrapper.addClass('cd-slider-active').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        $('body,html').animate({'scrollTop':slidesWrapper.offset().top}, 200);
      });
    }
  });
  $('.cd-slider-wrapper .cd-close').on('click', function(){
    //shrink slider images 
    itemInfoWrapper.removeClass('cd-slider-active');
  });
  //update visible slide
  $('.cd-next').on('click', function(){
    nextSlide();
  });
  $('.cd-prev').on('click', function(){
    prevSlide();
  });
  $(document).keyup(function(event){
    if(event.which=='37' && itemInfoWrapper.hasClass('cd-slider-active') && !$('.cd-slider .selected').is(':first-child')) {
      prevSlide();
    } else if( event.which=='39' && itemInfoWrapper.hasClass('cd-slider-active') && !$('.cd-slider .selected').is(':last-child')) {
      nextSlide();
    } else if(event.which=='27') {
      itemInfoWrapper.removeClass('cd-slider-active');
    }
  });
  slidesWrapper.on('swipeleft', function(){
    var bool = enableSwipe();
    if(!$('.cd-slider .selected').is(':last-child') && bool) {nextSlide();}
  });
  slidesWrapper.on('swiperight', function(){
    var bool = enableSwipe();
    if(!$('.cd-slider .selected').is(':first-child') && bool) {prevSlide();}
  });
  sliderPagination.on('click', function(){
    var selectedDot = $(this);
    if(!selectedDot.hasClass('selected')) {
      var selectedPosition = selectedDot.index(),
        activePosition = $('.cd-slider .selected').index();
      if( activePosition < selectedPosition) {
        nextSlide(selectedPosition);
      } else {
        prevSlide(selectedPosition);
      }
    }
  });
  function createSliderPagination($slides){
    var wrapper = $('
').insertAfter('.cd-slider-navigation');
    $slides.each(function(index){
      var dotWrapper = (index == 0) ? $('
') : $('
'),
        dot = $('').appendTo(dotWrapper);
      dotWrapper.appendTo(wrapper);
      dot.text(index+1);
    });
    return wrapper.children('li');
  }
  function nextSlide($n){
    var visibleSlide = $('.cd-slider .selected'),
      navigationDot = $('.cd-slider-pagination .selected');
    if(typeof $n === 'undefined') $n = visibleSlide.index() + 1;
    visibleSlide.removeClass('selected');
    slides.eq($n).addClass('selected').prevAll().addClass('move-left');
    navigationDot.removeClass('selected')
    sliderPagination.eq($n).addClass('selected');
    updateNavigation(slides.eq($n));
  }
  function prevSlide($n){
    var visibleSlide = $('.cd-slider .selected'),
      navigationDot = $('.cd-slider-pagination .selected');
    if(typeof $n === 'undefined') $n = visibleSlide.index() - 1;
    visibleSlide.removeClass('selected')
    slides.eq($n).addClass('selected').removeClass('move-left').nextAll().removeClass('move-left');
    navigationDot.removeClass('selected');
    sliderPagination.eq($n).addClass('selected');
    updateNavigation(slides.eq($n));
  }
  function updateNavigation($active) {
    $('.cd-prev').toggleClass('inactive', $active.is(':first-child'));
    $('.cd-next').toggleClass('inactive', $active.is(':last-child'));
  }
  function enableSwipe() {
    var mq = window.getComputedStyle(document.querySelector('.cd-slider'), '::before').getPropertyValue('content');
    return ( mq=='mobile' || itemInfoWrapper.hasClass('cd-slider-active'));
  }
});