jQuery和CSS3创意商品图片预览轮播图插件

这是一款非常实用的jQuery和CSS3创意商品图片预览轮播图插件。该轮播图插件以每个商品作为一个轮播图，用户可以在每个商品缩略图中查看该商品的颜色和款式。一般的商务网站都是通过图片来吸引用户，强烈的视觉冲击，尤其是在移动mobile设备，能够为你的商品获得更多用户的关注。

如果一件商品有不同的颜色和款式，那么一张商品缩略图就无法向用户表达，除非用户点击进入商品详细页。一个良好的且十分有创意的UX方案是在一张商品缩略图中可以让用户轮播切换商品图片。这只是一个简单的轮播图，可以让用户在点击进入商品详细页之前预览商品的颜色和款式。这种设计方式将可以大大的提升用户体验度以及获得更好转换率。

使用方法

HTML结构

该商品图片预览轮播图的HTML结构使用无序列表结构。每一个列表项都嵌套一个无序列表，用于存放商品的缩略图和商品的信息。

<ul class="cd-gallery">
  <li>
    <a href="http://codyhouse.co/">
      <ul class="cd-item-wrapper">
        <li class="selected">
          <img src="img/ugmonk-tshirt-1.jpg" alt="Preview image">
        </li>
 
        <li class="move-right" data-sale="true" data-price="$22">
          <img src="img/ugmonk-tshirt-2.jpg" alt="Preview image">
        </li>
 
        <li>
          <img src="img/ugmonk-tshirt-3.jpg" alt="Preview image">
        </li>
      </ul> <!-- cd-item-wrapper -->
    </a>
 
    <div class="cd-item-info">
      <b><a href="#0">Mountains</a></b>
 
      <em class="cd-price">$26</em>
    </div> <!-- cd-item-info -->
  </li>
 
  <!-- other list items here -->
</ul> <!-- cd-gallery -->               
              

注意：.cd-dots（每个商品轮播图的导航小圆点）和.cd-new-price（商品的价格）不是直接写在HTML中的，而是使用jQuery来动态插入。

CSS样式

在小屏幕设备上，用户看到的商品预览图是默认的样式：每次只看到一张图片，因为屏幕较小，这样不会使用户分心。用户可以通过滑动图片或点击缩略图来查看下一张预览图。

默认情况下，预览图是绝对定位并且使用translate将它们定位在父元素（.cd-gallery）之外，使它们不可见。插件中定义了4个class来为各个状态的缩略图定义样式：.selected-添加到列表的第一项，使其可见；.move-right-添加到列表的第二项，使预览图位于右边；.move-left-使预览图位于左边和.hide-left-隐藏左边的预览图。

.cd-item-wrapper li {
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  opacity: 0;
  transform: translateX(200%) scale(0.7);
}
.cd-item-wrapper li.selected {
  /* selected item */
  position: relative;
  opacity: 1;
  transform: translateX(0) scale(1.3);
}
.cd-item-wrapper li.move-right {
  /* item on right - preview visible */
  transform: translateX(100%) scale(0.7);
  opacity: 0.3;
}
.cd-item-wrapper li.move-left {
  /* item on left - preview visible */
  transform: translateX(-100%) scale(0.7);
  opacity: 0.3;
}
.cd-item-wrapper li.hide-left {
  /* items hidden on the left */
  transform: translateX(-200%) scale(0.7);
}               
              

在大屏幕上，用户在同一时间里可以看到更多的商品预览图。这时，为了保证预览图的简洁，在开始时只会显示一张商品预览图。

当用户用鼠标悬停在某张商品预览图上面的时候，才会显示出更多的商品预览图。插件中声明了3个class：.hover-当用户用鼠标滑过某张预览图时使用；.focus-on-right-当用户用鼠标滑过.move-right元素的时候添加到.selected和.move-left列表项上；.focus-on-left-当用户用鼠标滑过.move-left元素时添加到.selected和.move-right列表项上。

@media only screen and (min-width: 1048px) {
  .cd-item-wrapper li.move-left,
  .cd-item-wrapper li.move-right {
    /* hide preview items */
    opacity: 0;
  }
  .cd-item-wrapper li.focus-on-left {
    /* class added to the .selected and .move-right items when user hovers over the .move-left item (item preview on the left) */
    transform: translateX(3%) scale(1.25);
  }
  .cd-item-wrapper li.focus-on-left.move-right {
    transform: translateX(103%) scale(0.7);
  }
  .cd-item-wrapper li.focus-on-right {
    /* class added to the .selected and .move-left items when user hovers over the .move-right item (item preview on the right) */
    transform: translateX(-3%) scale(1.25);
  }
  .cd-item-wrapper li.focus-on-right.move-left {
    transform: translateX(-103%) scale(0.7);
  }
  .cd-item-wrapper li.hover {
    /* class added to the preview items (.move-left or .move-right) when user hovers over them */
    opacity: 1;
  }
  .cd-item-wrapper li.hover.move-left {
    transform: translateX(-97%) scale(0.75);
  }
  .cd-item-wrapper li.hover.move-right {
    transform: translateX(97%) scale(0.75);
  }
}             
              

JAVASCRIPT

该商品图片预览轮播图插件使用jQuery来实现图片轮播效果（通过触摸滑动导航、前/后导航按钮和原点导航）。另外，插件中提供了一个updatePrice()方法来动态更新商品的价格，将最新价格和原来的价格同时显示出来。这个方法会检查某个商品是否正在销售状态（data-sale="true"），如果是，就为.cd-price元素添加.on-sale class（这使得原来的价格被划上一条横线），并插入一个新的.cd-new-price元素（它的值等于当前商品的data-price）。

你可以在demo中的T恤衫上看到这个效果。

function updatePrice(container, n) {
  //container -> each one of the $('.cd-gallery').children('li')
  //n -> index of the selected item in the .cd-item-wrapper
  var priceTag = container.find('.cd-price'),
    selectedItem = container.find('.cd-item-wrapper li').eq(n);
  if( selectedItem.data('sale') ) { 
    // if item is on sale - cross old price and add new one
    priceTag.addClass('on-sale');
    var newPriceTag = ( priceTag.next('.cd-new-price').length > 0 ) ? priceTag.next('.cd-new-price') : $('<em class="cd-new-price"></em>').insertAfter(priceTag);
    newPriceTag.text(selectedItem.data('price'));
    setTimeout(function(){ newPriceTag.addClass('is-visible'); }, 100);
  } else {
    // if item is not on sale - remove cross on old price and sale price
    priceTag.removeClass('on-sale').next('.cd-new-price').removeClass('is-visible').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      priceTag.next('.cd-new-price').remove();
    });
  }
}