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

应用程序叙述:这是这款在原生植物Bootstrap carousel其内展开扩充而制做的新颖jQuery转动地牢应用程序。该转动地牢应用程序在不发生改变旧有的HTML条码的情况下,透过JS来解构转动地牢的内部结构,并紧密结合CSS式样来顺利完成转动地牢的表明。

%小知识:基于原生Bootstrap carousel扩展的实用jQuery旋转木马,横向轮播-猿站网-插图

概要讲义


采用方式

采用该转动地牢应用程序须要在网页中导入jquery和Bootstrap的有关文档。



HTML内部结构

该转动地牢应用程序采用原生植物的Bootstrap Carousel应用程序的HTML内部结构。

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 = $(),
 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);
 }
 }
});

建站知识

小知识:CSS 实现隐藏滚动条同时又可以滚动

2022-5-21 22:36:56

建站知识

小知识:常见的CSS水平垂直居中设置

2022-5-22 0:00:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索