用户信息
帖子内容
1 楼
七郎
注册会员
积分 28
注册 2018-03-04
     
分享:jquery+css首页幻灯片(全屏)

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



本帖由 七郎 于 2020-09-13 13:59:12 编辑过
2018-03-16 17:57:16
2 楼
七郎
注册会员
积分 28
注册 2018-03-04
     
回复: 分享:jquery+css首页幻灯片

经测试有效了哈!!

2018-03-17 17:17:41
3 楼
jetiben
管理人员
积分 8100
注册 2006-06-28
     
回复: 分享:jquery+css首页幻灯片(全屏)
不错,啊哈
2018-03-17 18:38:51 十年磨一剑,还没磨完那就再来十年!
4 楼
七郎
注册会员
积分 28
注册 2018-03-04
     
回复: 不错,啊哈
谢谢!老大鼓励!
2018-03-17 19:01:48
5 楼
32221032
注册会员
积分 76
注册 2018-08-21
     
回复: 分享:jquery+css首页幻灯片(全屏)
这是那个版本的?
2018-08-29 11:43:01
6 楼
weeya
钻石会员
积分 1746
注册 2010-10-28
     
回复: 分享:jquery+css首页幻灯片(全屏)

不错,啊哈,楼主的分享精神值得鼓励!

 

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

 

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

2018-08-29 17:53:25 易速网络 www.yiisu.com 承接JTBC3.0 定制建站 仿站,正规网络公司,可开发票,QQ:93715358(微信同号)
7 楼
32221032
注册会员
积分 76
注册 2018-08-21
     
回复: 分享:jquery+css首页幻灯片(全屏)

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

2018-08-30 12:56:01
8 楼
七郎
注册会员
积分 28
注册 2018-03-04
     
回复: 分享:jquery+css首页幻灯片(全屏)
32221032 发表于 2018-08-30 12:56:01

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

应该是没有js文件。

2020-09-13 14:00:01
9 楼
xglee
注册会员
积分 16
注册 2020-12-27
     
回复: 分享:jquery+css首页幻灯片(全屏)

非常感谢你的分享!


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

2020-12-31 04:33:19