这是一款在原生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); } } });