基于原生Bootstrap carousel扩展的实用jQuery旋转木马,横向轮播

所属分类:媒体-幻灯片和轮播图,滑块和旋转

 40583  289  查看评论 (8)
分享到微信朋友圈
X
基于原生Bootstrap carousel扩展的实用jQuery旋转木马,横向轮播 ie兼容10

简要教程

这是一款在原生Bootstrap carousel之上进行扩展而制作的实用jQuery旋转木马插件。该旋转木马插件在不改变原有的HTML标签的情况下,通过JS来重构旋转木马的结构,并结合CSS样式来完成旋转木马的显示。

使用方法

使用该旋转木马插件需要在页面中引入jquery和Bootstrap的相关文件。

<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

HTML结构

该旋转木马插件使用原生的Bootstrap Carousel插件的HTML结构。

<div id="example" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <ul class="row item active">
      <li class="col-xs-4">
        <img src="1.jpg" srcset="1.jpg,[email protected]" class="img-responsive">
      </li>
      <li class="col-xs-4">
        <img src="2.jpg" srcset="2.jpg,[email protected]" class="img-responsive">
      </li>
      <li class="col-xs-4">
        <img src="3.jpg" srcset="3.jpg,[email protected]" class="img-responsive">
      </li>
    </ul>
    <ul class="row item">
      <li class="col-xs-4">
        <img src="4.jpg" srcset="4.jpg,[email protected]" class="img-responsive">
      </li>
      <li class="col-xs-4">
        <img src="5.jpg" srcset="5.jpg,[email protected]" class="img-responsive">
      </li>
      <li class="col-xs-4">
        <img src="6.jpg" srcset="6.jpg,[email protected]" class="img-responsive">
      </li>
    </ul>
  </div>
  <a class="carousel-control left" href="#example" data-slide="prev">Previous</a>
  <a class="carousel-control right" href="#example" data-slide="next">Next</a>  
</div>

CSS样式

为旋转木马添加以下一些必要的CSS样式。

.carousel[data-shift="1"] .carousel-inner > .item {
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
 
.carousel .carousel-inner > .item.row { margin: 0; }
 
.carousel .carousel-control {
  background: none;
  color: transparent;
  overflow: hidden;
  text-shadow: none;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  width: 30px;
}
 
.carousel .carousel-control:before {
  color: #444;
  font-family: 'Glyphicons Halflings';
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 30px;
}
.carousel .carousel-control:after {
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  content: '';
  height: 60%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  width: 100%;
}
.carousel .carousel-control:hover:after { 
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.7); 
}
.carousel .carousel-control.left { left: -30px; }
 
.carousel .carousel-control.left:before { content: '\e079'; }
 
.carousel .carousel-control.left:after { right: -100%; }
 
.carousel .carousel-control.right { right: -30px; }
 
.carousel .carousel-control.right:before { content: '\e080'; }
 
.carousel .carousel-control.right:after { left: -100%; }

 初始化插件


最后可以通过下面的JavaScript(jQuery)代码来对旋转木马进行重构。

var carousels = $('.carousel');
carousels.each(function() {
  var $obj = $(this);
  var $inner = $obj.find('.carousel-inner');
   
  var id = 'uuid' + new Date().getTime();
  $obj.addClass(id);
 
  if ($obj.data('shift') === 1) {
    var items = $obj.find('.item > [class*="col-"]'),
        visibleCnt = $obj.find('.item:first [class*="col-"]').length,
        wrapper = "";
     
    // 内置CSS样式
    var rule_base = '.carousel.' + id + ' .carousel-inner > .item',
        styles = $('<style></style>'),
        rules = [];
        rules[0] = rule_base + '.next {left: ' + (100 / visibleCnt) + '%; transform: none;}';
        rules[1] = rule_base + '.active {left: 0;}';
        rules[2] = rule_base + '.active.left {left: -' + (100 / visibleCnt) + '%; transform: none;}';
        rules[3] = rule_base + '.next.left {left: 0;}';
        rules[4] = rule_base + '.active.right {left: ' + (100 / visibleCnt) + '%; transform: none;}';
        rules[5] = rule_base + '.prev.right {left: 0;}';
        rules[6] = rule_base + '.prev {left: -' + (100 / visibleCnt) + '%; transform: none;}';
    for (var i = 0; i < rules.length; i++) {
      styles.append(rules[i]);
    }
    $obj.prepend(styles);
 
    // 重构旋转木马的HTML结构
    for (var i = 0; i < $(items).length; i++) {
      var $item = $(items[i]);
      var parent = $item.parent();
      if (parent.hasClass('item')) {
        if (!wrapper.length) {
          wrapper = parent.clone().removeClass('active').html('');
        }
        $item.unwrap();
      }
       
      var itemGroup = [$item];
      for (var x = 1; x < visibleCnt; x++) {
        var a = i + x;
        var next = $(items[a]);
        if (!next.length) {
          next = $(items[(a - $(items).length)]);
        }
        itemGroup[x] = next.clone();
      }
      var newSet = wrapper.clone().html(itemGroup);
      if (i == 0) {
        newSet.addClass('active');
      }
      newSet.appendTo($inner);
    }
  }
});


相关插件-幻灯片和轮播图,滑块和旋转

图片点击查看更多图片

仿京东,天猫商品详情 图片点击查看更多图片
  幻灯片和轮播图
 31138  192

jQuery.slidizle可完全自定义的响应式jQuery幻灯片插件

jQuery.slidizle是一款可完全自定义的响应式jQuery幻灯片插件。该插件只是将一些class类放置到幻灯片的HTML标签中,用户可以通过修改这些class来修改幻灯片的外观。
  幻灯片和轮播图
 27179  263
  幻灯片和轮播图
 21270  250

jQuery超酷响应式圆形图片轮播图特效

jQuery超酷响应式圆形图片轮播图,幻灯片,焦点图特效
  幻灯片和轮播图
 29075  272

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    y 0
    2019/3/20 15:30:43
    图片是动态又有多个的话ul标签 循环就有点不明白了 回复
    loveyhc 0
    2019/3/5 17:21:03
    感谢 终于找了个不用币下载的!! 回复
    xgcshxzh 0
    2018/11/14 20:44:24
    怎样修改轮播速度? 回复
    needi 0
    2018/8/3 12:17:41
    怎么设置不自动轮播
        ?Naruto0
        2019/2/18 16:05:30
        去掉 data-ride="carousel"这个就可以
    回复
    つ风吹起如花般细碎的流年 0
    2018/1/29 15:13:38

    怎么取消自动轮播呀

    回复
    陈志伟 0
    2016/8/1 10:08:29
    第二个可以设置不自动播放不?
        麻辣的午夜茶0
        2016/9/27 16:09:56
        可以,演示第二个也可以自动播放
    回复
取消回复