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

插件描述:这是一款在原生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旋转木马,横向轮播

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. 搬瓦工说道:

    朋友 交换链接吗

  2. 百约不得姐说道:

    为啥我又来,因为这里百看不厌!

  3. 虚拟主机说道:

    文章不错非常喜欢

  4. 增大网说道:

    我踩故我在,下次还会来!