概要讲义

采用方式

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

HTML内部结构

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

 

 

 

 
 
 

 
 
 

 
 
 
 

 

 
 
 

 
 
 

 
 
 
 
 Previous
 Next 

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);
 }
 }
});

声明： 猿站网有关资源均来自网络搜集与网友提供，任何涉及商业盈利目的的均不得使用，否则产生的一切后果将由您自己承担！ 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除，制止非法恶意传播，不对任何下载或转载者造成的危害负任何法律责任！也请大家支持、购置正版！ 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报，会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络，如有侵权烦请发送邮件至：2697268773@qq.com进行处理。