幻灯片/轮播

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

阿里云

这是一款可扩展的 jQuery 和 css3 图片幻灯片插件。在大屏幕上点击幻灯片时,幻灯片将放大到全屏宽度,并出现前后导航;在小屏幕上直接出现幻灯片效果。我们经常能看到“50%平均分割布局”:屏幕的 50%宽是图片,50%宽是文字。这种模式可以在我们这个幻灯片插件中使用。通常情况下,用户不能和图片进行交互。但是如果你想显示更多的图片该怎么办呢?一个解决方案是在点击时触发一个模态窗口来显示幻灯片。现在通过 CSS Transitions 为我们提供了更好的用户体验方案。这是一种新的用于扩展图像的方法,通过覆盖相邻的内容和将额外内容向下推进来使其全屏显示,从而将它变成一个全屏幻灯片。

HTML 结构:

html 结构包含两个主要的

也想出现在这里?联系我们
创客主机
(.cd-slider-wrapper 和.cd-item-info):。第一个 div 包含图片幻灯片,第二个 div 包含一些标题、说明文本等。它们都被包含在 section.cd-single-item 中。其他的内容包含在 section .cd-content 中。

  1. <section class="cd-single-item">
  2.   <div class="cd-slider-wrapper">
  3.     <ul class="cd-slider">
  4.       <li class="selected"><img src="img/img-1.jpg" alt="Product Image 1"></li>
  5.       <li><img src="img/img-2.jpg" alt="Product Image 1"></li>
  6.       <li><img src="img/img-3.jpg" alt="Product Image 2"></li>
  7.     </ul> <!-- cd-slider -->
  8.  
  9.     <ul class="cd-slider-navigation">
  10.       <li><a href="#0" class="cd-prev inactive">Next</a></li>
  11.       <li><a href="#0" class="cd-next">Prev</a></li>
  12.     </ul> <!-- cd-slider-navigation -->
  13.  
  14.     <a href="#0" class="cd-close">Close</a>
  15.   </div> <!-- cd-slider-wrapper -->
  16.  
  17.   <div class="cd-item-info">
  18.     <h2>Produt Title</h2>
  19.     <p>Lorem ipsum dolor sit amet...</p>
  20.     <button class="add-to-cart">Add to cart</button>            
  21.   </div> <!-- cd-item-info -->
  22. </section> <!-- cd-single-item -->
  23.  
  24. <section class="cd-content">
  25.   <!--  other content here -->
  26. </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 来使动画变得更加平滑。

  1. @media only screen and (min-width: 1024px) {
  2.   .cd-slider-wrapper {
  3.     transition: width 0.4s;
  4.     width: 50%; 
  5.   }
  6.   .cd-slider-active .cd-slider-wrapper {
  7.     width: 100%; 
  8.   } 
  9. }
  10. @media only screen and (min-width: 1024px) {
  11.   .cd-item-info {
  12.     position: absolute;
  13.     width: 50%;
  14.     top: 0;
  15.     right: 0;
  16.     padding: 60px 60px 0;
  17.   } 
  18. }

为了使这个技术能够正常工作,要求图片幻灯片中的图片的宽高比必须大于 1(宽度大于高度)。当图片进入幻灯片模式,它的高度是成比例增加的宽度。因此,与纵横比小于 1 会导致更多的图像滚动。另外,因为.cd-item-info 是 position: absolute 的,.cd-single-item 元素的高度仅仅通过幻灯片图片的高度来设置。因此,.cd-item-info 要比幻灯片图片的高度要小。

JAVASCRIPT 部分:

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

  1. jQuery(document).ready(function($){
  2.   var itemInfoWrapper = $('.cd-single-item'),
  3.     slides = $('.cd-slider li'),
  4.     slidesWrapper = $('.cd-slider'),
  5.     // create slider pagination
  6.     sliderPagination = createSliderPagination(slides);
  7.   slidesWrapper.on('click', function(event){
  8.     //enlarge slider images 
  9.     if( !itemInfoWrapper.hasClass('cd-slider-active') && $(event.target).is('.cd-slider')) {
  10.       itemInfoWrapper.addClass('cd-slider-active').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  11.         $('body,html').animate({'scrollTop':slidesWrapper.offset().top}, 200);
  12.       });
  13.     }
  14.   });
  15.   $('.cd-slider-wrapper .cd-close').on('click', function(){
  16.     //shrink slider images 
  17.     itemInfoWrapper.removeClass('cd-slider-active');
  18.   });
  19.   //update visible slide
  20.   $('.cd-next').on('click', function(){
  21.     nextSlide();
  22.   });
  23.   $('.cd-prev').on('click', function(){
  24.     prevSlide();
  25.   });
  26.   $(document).keyup(function(event){
  27.     if(event.which=='37' && itemInfoWrapper.hasClass('cd-slider-active') && !$('.cd-slider .selected').is(':first-child')) {
  28.       prevSlide();
  29.     } else if( event.which=='39' && itemInfoWrapper.hasClass('cd-slider-active') && !$('.cd-slider .selected').is(':last-child')) {
  30.       nextSlide();
  31.     } else if(event.which=='27') {
  32.       itemInfoWrapper.removeClass('cd-slider-active');
  33.     }
  34.   });
  35.   slidesWrapper.on('swipeleft', function(){
  36.     var bool = enableSwipe();
  37.     if(!$('.cd-slider .selected').is(':last-child') && bool) {nextSlide();}
  38.   });
  39.   slidesWrapper.on('swiperight', function(){
  40.     var bool = enableSwipe();
  41.     if(!$('.cd-slider .selected').is(':first-child') && bool) {prevSlide();}
  42.   });
  43.   sliderPagination.on('click', function(){
  44.     var selectedDot = $(this);
  45.     if(!selectedDot.hasClass('selected')) {
  46.       var selectedPosition = selectedDot.index(),
  47.         activePosition = $('.cd-slider .selected').index();
  48.       if( activePosition < selectedPosition) {
  49.         nextSlide(selectedPosition);
  50.       } else {
  51.         prevSlide(selectedPosition);
  52.       }
  53.     }
  54.   });
  55.   function createSliderPagination($slides){
  56.     var wrapper = $('<ul class="cd-slider-pagination"></ul>').insertAfter('.cd-slider-navigation');
  57.     $slides.each(function(index){
  58.       var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
  59.         dot = $('<a href="#0"></a>').appendTo(dotWrapper);
  60.       dotWrapper.appendTo(wrapper);
  61.       dot.text(index+1);
  62.     });
  63.     return wrapper.children('li');
  64.   }
  65.   function nextSlide($n){
  66.     var visibleSlide = $('.cd-slider .selected'),
  67.       navigationDot = $('.cd-slider-pagination .selected');
  68.     if(typeof $n === 'undefined') $n = visibleSlide.index() + 1;
  69.     visibleSlide.removeClass('selected');
  70.     slides.eq($n).addClass('selected').prevAll().addClass('move-left');
  71.     navigationDot.removeClass('selected')
  72.     sliderPagination.eq($n).addClass('selected');
  73.     updateNavigation(slides.eq($n));
  74.   }
  75.   function prevSlide($n){
  76.     var visibleSlide = $('.cd-slider .selected'),
  77.       navigationDot = $('.cd-slider-pagination .selected');
  78.     if(typeof $n === 'undefined') $n = visibleSlide.index() - 1;
  79.     visibleSlide.removeClass('selected')
  80.     slides.eq($n).addClass('selected').removeClass('move-left').nextAll().removeClass('move-left');
  81.     navigationDot.removeClass('selected');
  82.     sliderPagination.eq($n).addClass('selected');
  83.     updateNavigation(slides.eq($n));
  84.   }
  85.   function updateNavigation($active) {
  86.     $('.cd-prev').toggleClass('inactive', $active.is(':first-child'));
  87.     $('.cd-next').toggleClass('inactive', $active.is(':last-child'));
  88.   }
  89.   function enableSwipe() {
  90.     var mq = window.getComputedStyle(document.querySelector('.cd-slider'), '::before').getPropertyValue('content');
  91.     return ( mq=='mobile' || itemInfoWrapper.hasClass('cd-slider-active'));
  92.   }
  93. });

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

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

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

发表回复

热销模板

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

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