discuz使用swiper
实现方法,通过discuz的diy 添加一个模块,放入自定义的html代码,通过外部js与css控制
<div id="banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"><img src="http://www.dz.com/template/51zuso/images/banner1.png"></a> </div> <div class="swiper-slide"> <a href="#"><img src="http://www.dz.com/template/51zuso/images/banner2.png"></a> </div> </div> </div> <div class="pagination-banner"></div> <div class="swiper-button-prev swiper-button-black"></div> <div class="swiper-button-next swiper-button-black"></div> </div>
<!-- 横幅start --> <link rel="stylesheet" href="{TPLDIR}/static/swiper3/swiper3.4.2.min.css"> <script src="{TPLDIR}/static/swiper3/swiper3.4.2.min.js"></script> <style> #diy_banner .frame, .frame-tab{ background:none; border:none; } #banner{ width:1240px; margin:0 auto; position:relative; overflow:hidden; } #banner .swiper-slide img{ max-width:100%; display:block; } #banner .pagination-banner{ position:absolute; z-index:999; bottom:40px; text-align:center; width:100%; text-align:center; height:0px; line-height:0px; } #banner .pagination-banner span{ display:inline-block; width:10px; height:10px; background:#fff; margin:0 5px; opacity:0.8; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; -o-transition: 0.2s; cursor:pointer; border-radius:5px; } #banner .pagination-banner .swiper-pagination-bullet-active{ background:#00A84D; width:20px; opacity:1; } #banner .arrow{ position:absolute; top:50%; background:#000; width:30px; height:70px; line-height:70px; margin-top:-35px; text-align:center; opacity:1; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; -o-transition: 0.2s; cursor:pointer; } #banner .arrow:hover{ opacity:0.9 !important; } #banner .arrow span{ font-size:30px; color:#fff; } #banner .arrow-left{ left:-30px; z-index:9999; border-radius:5px 0 0 5px; } #banner .arrow-right{ top:50%; right:-30px; border-radius:0 5px 5px 0; z-index:9999; } #banner:hover .arrow-left{ left:10px; opacity:0.6; } #banner:hover .arrow-right{ right:10px; opacity:0.6; } #banner .swiper-slide{ position:relative; } #banner .swiper-button-next{ padding:10px; background-color:#fff; margin:-31px 10px 0 0; opacity:0; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; } #banner .swiper-button-prev{ padding:10px; background-color:#fff; margin:-31px 0 0 10px; opacity:0; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; } #banner:hover .swiper-button-next{ opacity:0.6; margin:-31px -5px 0 0; } #banner:hover .swiper-button-prev{ opacity:0.6; margin:-31px 0 0 -5px; } #banner:hover .swiper-button-next:hover,#banner:hover .swiper-button-prev:hover{ opacity:0.9; } </style> <!--[diy=diy_banner]--><div id="diy_banner" class="area"></div><!--[/diy]--> <script type="text/javascript"> var mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination-banner', loop:true, grabCursor: true, paginationClickable: true, calculateHeight : true,//清除高度 autoplay:5000, prevButton:'.swiper-button-prev', nextButton:'.swiper-button-next', }); </script>
效果