首先准备轮播的图片、左右箭头图片和js。高手就不要见笑!
本想上传箭头图片和js,但本论坛无法上传。
预览地址;http://cnzhuge.com
就算提供个思路吧。
1、/common/template/public.jtbc
<script type="text/javascript" src="{$=$global.assetspath}/js/jtbc.frontend.js"></script>
下面加
<script type="text/javascript" src="{$=$global.assetspath}/js/syftp.js"></script>
2、/common/assets/themes/default/global.css
原 .home .banner {width: 100%; height: 660px; background: url(banner.svg) center center; background-size: cover; position: relative; z-index: 100}
改 .home .banner {width: 100%; height: 660px; background: black center center; background-size: cover; position: relative; z-index: 100}
并在这下
.home_item:nth-child(odd) {background: #fff}
加
*{ margin:0; padding:0; list-style:none;}
#divSmallBox{overflow:hidden;*display:inline;*zoom:1;width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;}
#syftp{ width:100%; height:660px; margin:0 auto; background:#333; position:relative; overflow:hidden;}
#syftp .oUlplay { width:99999px; position:absolute; left:0; top:0;}
#syftp .oUlplay li{ float:left;}
#syftp .pre{ cursor:pointer; width:45px; height:45px; background:url(箭头图片路径/images/l.png) no-repeat; position:absolute; top:40%; left:10px; z-index:10;}
#syftp .next{ cursor:pointer; width:45px; height:45px; background:url(箭头图片路径/images/r.png) no-repeat; position:absolute; top:40%; right:10px; z-index:10;}
#syftp .smalltitle {width:100%; height:10px; position:absolute; bottom:20px; z-index:10}
#syftp .smalltitle ul{ width:120px; margin:0 auto;}
#syftp .smalltitle ul li{ width:16px; height:16px; margin:0 10px; border-radius:10px; background:url(圆点图片路径/images/circle-empty.png ); float:left; overflow:hidden;*display:inline;*zoom:1;}
#syftp .smalltitle .thistitle{ background-image: url(圆点图片路径/images/circle-full.png );}
3、/common/template/index.jtbc
<div class="banner">
下面加
<div id="syftp">
<div class="pre"></div>
<div class="next"></div>
<div class="smalltitle">
<ul>
<li class="thistitle"></li>
<li></li>
</ul>
</div>
<ul class="oUlplay">
<li><img src="轮播图片路径/images/1.jpg"></li>
<li><img src="轮播图片路径/images/2.jpg"></li>
</ul>
</div>