实现方法，通过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>

效果