用户信息
帖子内容
1 楼
七郎
注册会员
积分 26
注册 2018-03-04
     
分享:jquery+css首页幻灯片(全屏)
首先准备轮播的图片、左右箭头图片和js。高手就不要见笑!
本想上传箭头图片和js,但无法实现,加上我现这个调试这个地址是临时的,所以不好加链接。

预览地址;http://tea0839.com/tea/  注:这是我调试地址。


  就算提供个思路吧。

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>


本帖由 七郎 于 2018-04-16 20:00:40 编辑过
2018-03-16 17:57:16
2 楼
七郎
注册会员
积分 26
注册 2018-03-04
     
回复: 分享:jquery+css首页幻灯片
经测试有效了哈!!
2018-03-17 17:17:41
3 楼
jetiben
管理人员
积分 7976
注册 2006-06-28
     
回复: 分享:jquery+css首页幻灯片(全屏)
不错,啊哈
2018-03-17 18:38:51
4 楼
七郎
注册会员
积分 26
注册 2018-03-04
     
回复: 不错,啊哈
谢谢!老大鼓励!
2018-03-17 19:01:48