幻灯片/轮播

实用3D产品快速预览相册插件

阿里云

这是一款非常实用的 jQuery 和 css3 3d 产品快速预览展示画廊插件。该插件在同一个屏幕上以网格的方式展示很多产品,每一组产品又可以以 3d 幻灯片的方式不断的切换图片,效果非常不错。制作这款插件的原因是:假如我有很多产品,我会为它们挑选出一些最好看的图片来展示给客户看。当客户点击一个产品,通常是跳转到一个产品介绍页面,或许那里有产品图片的幻灯片。但是,如果能在客户跳转到产品页面之前给他们更多的产品信息,会使客户更加想要购买这些商品。因此,我们为产品图片画廊中的每组产品图片都添加了一个幻灯片,该幻灯片默认是隐藏的,只有鼠标滑过时才会触发它。

HTML 结构:

html 结构使用一个无序列表作为 wraper。在它里面每一个列表项都是一个嵌套结构的无序列表。

也想出现在这里?联系我们
创客主机
  1. <ul>
  2.   <li>
  3.     <ul class="cd-item-wrapper">
  4.       <li class="cd-item-front"><a href="#0"><img src="img/thumb-1.jpg"></a></li>
  5.       <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg"></a></li>
  6.       <li class="cd-item-back"><a href="#0"><img src="img/thumb-3.jpg"></a></li>
  7.       <li class="cd-item-out"><a href="#0"><img src="img/thumb-4.jpg"></a></li>
  8.       <!-- <li class="cd-item-out">...</li> -->
  9.     </ul> <!-- cd-item-wrapper -->
  10.  
  11.     <div class="cd-item-info">
  12.       <b><a href="#0">Product Name</a></b>
  13.       <em>$9.99</em>
  14.     </div> <!-- cd-item-info -->
  15.  
  16.     <nav>
  17.       <ul class="cd-item-navigation">
  18.         <li><a class="cd-img-replace" href="#0">Prev</a></li>
  19.         <li><a class="cd-img-replace" href="#0">Next</a></li>
  20.       </ul>
  21.     </nav>
  22.  
  23.     <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
  24.   </li>
  25.  
  26.   <li>
  27.     <!-- ... -->
  28.   </li>
  29. </ul>

CSS 样式:
我们使用 CSS3 3D transformations 来创建 3D 效果。为了制作 3D 效果,我们需要在父元素(嵌套的无序列表)上使用透视(perspective)。我们为列表项定义了 4 个 class:.cd-item-front、.cd-item-middle 和.cd-item-back 提供给前 3 个列表项,.cd-item-out 给其它列表项(不可见的列表项)使用。

  1. .cd-item-wrapper {
  2.   perspective: 500px;
  3.   perspective-origin: 50% -30%;
  4. }
  5.  
  6. .cd-item-wrapper li {
  7.   position: absolute;
  8.   top: 0;
  9.   left: 0;
  10.   transition: all 0.4s;
  11. }
  12.  
  13. .cd-item-wrapper li.cd-item-front {
  14.   position: relative;
  15.   z-index: 3;
  16. }
  17.  
  18. .cd-item-wrapper li.cd-item-middle {
  19.   z-index: 2;
  20. }
  21.  
  22. .cd-item-wrapper li.cd-item-back {
  23.   z-index: 1;
  24. }
  25.  
  26. .cd-item-wrapper li.cd-item-out {
  27.   /* picture not visible - use this class in case you have more than 3 pictures per item */
  28.   z-index: 0;
  29.   opacity: 0;
  30. }

注意:perspective-origin 属性的第二个值(Y 轴)是负数的。通过这个方法,当我们把列表项沿着 Z 轴推入,在画面的前方是可以看到效果的,见下图:

在非触摸屏的设备上,我们需要 hover 选择器来触发 3D 效果。

  1. .no-touch #cd-gallery-items > li:hover .cd-item-middle {
  2.   transform: translate3d(0, 0, -20px);
  3.   opacity: .8;
  4. }
  5. .no-touch #cd-gallery-items > li:hover .cd-item-back {
  6.   transform: translate3d(0, 0, -40px);
  7.   opacity: .4;
  8. }

最后,我们需要俩个 class 来制作 slide-out 效果。

  1. .cd-item-wrapper li.move-right {
  2.   transform: translate3d(200px, 0, 0);
  3.   opacity: 0;
  4.   z-index: 4 !important;
  5. }
  6. .cd-item-wrapper li.hidden {
  7.   /* used to hide the picture once it's pushed out - to the right */
  8.   display: none !important;
  9. }

JAVASCRIPT 部分:

我们定义两个方法来控制导航按钮:updateNavigation() 和 hideNavigation()。

  1. function updateNavigation(navigation, container) {
  2.   //container is the .cd-item-wrapper element
  3.   var isNextActive = ( container.find('.cd-item-middle').length > 0 ) ? true : false,
  4.     isPrevActive =  ( container.children('li').eq(0).hasClass('cd-item-front') ) ? false : true;
  5.   (isNextActive) ? navigation.find('a').eq(1).addClass('visible') : navigation.find('a').eq(1).removeClass('visible');
  6.   (isPrevActive) ? navigation.find('a').eq(0).addClass('visible') : navigation.find('a').eq(0).removeClass('visible');
  7. }
  8.  
  9. function hideNavigation(navigation) {
  10.   navigation.find('a').removeClass('visible');
  11. }

在非触摸屏设备上,我们使用 hover 事件来切换导航按钮的可见性。在触摸屏设备上,我们在.cd-3d-trigger 使用 click 事件来触发它。当用户点击了幻灯片导航按钮,我们改变.cd-item-wrapper li 的 class 来实现 3D 滑动效果。

  1. var galleryNavigation = $('.cd-item-navigation a');
  2. //change image in the slider
  3. galleryNavigation.on('click', function(){
  4.   var navigationAnchor = $(this);
  5.     direction = navigationAnchor.text(),
  6.     activeContainer = navigationAnchor.parents('nav').eq(0).siblings('.cd-item-wrapper');
  7.  
  8.   ( direction=="Next") ? showNextSlide(activeContainer) : showPreviousSlide(activeContainer);
  9.   updateNavigation(navigationAnchor.parents('.cd-item-navigation').eq(0), activeContainer);
  10. });

实用 3D 产品快速预览相册插件

已有 510 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!