首先准备轮播的图片、左右箭头图片和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>

经测试有效了哈！！

不错，啊哈，楼主的分享精神值得鼓励！

syftp.js文件和圆点图片素材没有。如一起分享会方便大家。

回复楼上，这是PHP3.0版本的。

我加上去了  但是不会轮播  两张图片平铺 ，是什么情况？

应该是没有js文件。

非常感谢你的分享！

有个问题想请教，你的产品列表在手机浏览器下是如何做到双列排版的？