JQUERY源码 作者： - 2016年8月21日
1个投票
没有评论

幻灯片轮播图-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;
  }
}
为了使这个技术能够正常工作，要求图片幻灯片中的图片的宽高比必须大于1（宽度大于高度）。当图片进入幻灯片模式，它的高度是成比例增加的宽度。因此，与纵横比小于1会导致更多的图像滚动。

另外，因为.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 = $('<ul class="cd-slider-pagination"></ul>').insertAfter('.cd-slider-navigation');
    $slides.each(function(index){
      var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
        dot = $('<a href="#0"></a>').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'));
  }
});

在线预览 网盘下载

郑重声明：

				
1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

				
2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

				
3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

				
4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。
作者： 蓝文
查看更多
标签:, , , , ,
关注公众号“蓝文资源库”获取更多好资源
幻灯片轮播图-jQuery和CSS3可扩展的购物页面图片幻灯片插件 5 out of 5 based on 1 ratings. 1 user reviews.

相关文章

WORDPRESS主题模板 2022年8月2日

Soledad响应式创意时尚多主题多用途WP主题模板下载

超过6886个用于多种用途的首…

阅读更多
WORDPRESS主题模板 2022年8月2日

Stockholm经典多用途响应式主题WORDPRESS模板下载

Stockholm是一个华丽的…

阅读更多
WORDPRESS主题模板 2022年8月2日 3

The7最新版经典响应式多用途主题WP模板下载

The7与视觉作曲家和终极插件…

阅读更多

发表评论