标签:splay call images 数字 items eve 没有 中秋 scale
思路:
轮播图,首选就是swiper,在此基础上改,但是撸了一遍API发现并没有类似的,所以只能自己改CSS了。
小弟不才 直接上干货了。
SCSS方面:
.swiper-slide { text-align: center; font-size: 18px; // background: red; width: 605px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; /*缩放*/ -webkit-transition: 1000ms; -moz-transition: 1000ms; -ms-transition: 1000ms; -o-transition: 1000ms; transition: 1000ms; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-backface-visibility: hidden; opacity: 0.3; border-radius:10px; overflow:hidden; img{ display:block; width:605px; height:300px; } &.swiper-slide-active{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } }
dom结构:
<div class="swiper-container" id=‘swiper‘> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href=""> <img src="" alt=""> </a> </div> <!-- 轮播里面 --> </div> <div class="swiper-pagination top_right"></div><!-- index 数字显示 --> <div class=‘top_left‘>淳朴老味道 优选中秋月</div><!--设计需要的标题 --> </div>
js部分:
var swiper = new Swiper(‘.swiper-container‘, { pagination: ‘.swiper-pagination‘, centeredSlides: true, initialSlide :0, loop:true, paginationType : ‘fraction‘, slidesPerView: ‘auto‘, preventClicks : false, autoplay : 3000, speed:1000, });
设计图:
结束语:
你们用的时候记得引入JQ swiper.min.js还有swiper.css啊!!!
标签:splay call images 数字 items eve 没有 中秋 scale
原文地址:http://www.cnblogs.com/Amcc/p/7615500.html