基于Bootstrap carousel扩展jQuery旋转木马

PetitQ 幻灯片/轮播 2018-11-06 1.43K 0 0

这是一款在原生 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,1@2x.jpg" class="img-responsive">

```
      </li>
```
```
      <li class="col-xs-4">
```

        <img src="2.jpg" srcset="2.jpg,2@2x.jpg" class="img-responsive">

```
      </li>
```
```
      <li class="col-xs-4">
```

        <img src="3.jpg" srcset="3.jpg,3@2x.jpg" class="img-responsive">

```
      </li>
```
```
    </ul>
```
```
    <ul class="row item">
```
```
      <li class="col-xs-4">
```

        <img src="4.jpg" srcset="4.jpg,4@2x.jpg" class="img-responsive">

```
      </li>
```
```
      <li class="col-xs-4">
```

        <img src="5.jpg" srcset="5.jpg,5@2x.jpg" class="img-responsive">

```
      </li>
```
```
      <li class="col-xs-4">
```

        <img src="6.jpg" srcset="6.jpg,6@2x.jpg" 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);
```
```
    }
```
```
  }
```
```
});
```

基于 Bootstrap carousel 扩展 jQuery 旋转木马

已有 357 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

幻灯片/轮播

基于Bootstrap carousel扩展jQuery旋转木马

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

基于 Bootstrap carousel 扩展 jQuery 旋转木马

相关文章

灵活响应式图片画廊jQuery特效插件

仿易迅网焦点图片全屏幻灯片jQuery特效

百叶窗过渡效果jQuery幻灯片插件

发表回复取消回复

热销模板

幻灯片/轮播

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

基于 Bootstrap carousel 扩展 jQuery 旋转木马

相关文章

发表回复 取消回复

热销模板

发表回复取消回复