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

PetitQ 幻灯片/轮播 2018-10-31 2.37K 0 0

这是一款非常实用的 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> 
```
```
    </a>
```
```
 
```
```
    <div class="cd-item-info">
```
```
      <b><a href="#0">Mountains</a></b>
```
```
 
```
```
      <em class="cd-price">$26</em>
```
```
    </div> 
```
```
  </li>
```
```
 
```
```
  
```
```
</ul> 
```

注意：.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();

```
    });
```
```
  }
```
```
}
```

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

已有 593 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

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

HTML 结构:

CSS 样式:

JAVASCRIPT:

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

相关文章

基于anime动感圆形轮播图特效

Skippr - 最简洁实用jQuery幻灯片插件

多种特效网格缩略图JS幻灯片

发表回复取消回复

热销模板

幻灯片/轮播

HTML 结构:

CSS 样式:

JAVASCRIPT:

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复