QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper响应式全屏banner图片滚动轮播代码

原创商用 swiper响应式全屏banner图片滚动轮播代码

jQuery基于swiper.js库制作响应式宽屏的banner图片文字滚动轮播,支持触屏滑动切换。适用于响应式网站图片布局展示代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/swiper.css" />

2、head引入js文件

<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
<script type="text/javascript" src="js/swiper.js"></script>

3、body引入HTML代码

<div class="wqd-section-three">

	<div class="section-three-fix">
		<h5 class="animate-img wqd-h5 animate-text" data-lazy="lazy">用户口碑推荐</h5>
		<p class="animate-img wqd-p animate-text" data-lazy="lazy">百万企业信赖推荐,市场口碑零差评,性价比高</p>
		<a href="#" class="animate-text wqd-btn-blue animate-btn" data-lazy="lazy">立即创建</a>
	</div>
	
	<div class="section-three-box">
	
		<div class="section-box-title">
			<em></em>
			<em></em>
			<em></em>
		</div>
		
		<div class="section-img">
			<img src="images/sectoin-im3.jpg" width="100%" alt="" style="opacity:1;">
			<img src="images/section-bg3-61.jpg" width="100%" alt="">
			<img src="images/section-bg3-21.jpg" width="100%" alt="">
			<img src="images/section-bg3-31.jpg" width="100%" alt="">
			<img src="images/section-bg3-71.jpg" width="100%" alt="">
			<img src="images/section-bg3-51.jpg" width="100%" alt="">
		</div>
		
	</div>
	
	<div class="slipe-box">

		<div class="bannar">
		
			<div class="slipe-left"><img src="images/banner-arow.png" alt="" /></div>
			<div class="slipe-right"><img src="images/banner-arow.png" alt="" /></div>

			<div class="swiper-container slider-two">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">太清凉茶甜品网站需要展示产品色香味的特色,微企点的强大的页面布局功能和参数调整,非常专业展示了产品的特色,浏览体验非常好。</p>
							<h6 class="animate-text" data-lazy="lazy">太清凉茶甜品 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">非鱼是一个壁画墙绘网站,需要炫酷展示产品。微企点的动态交互设计非常好用,就算你完全不懂代码,那种漂亮的边栏弹出、鼠标停留展示多层内容等动画特效,也可以轻松实现。</p>
							<h6 class="animate-text" data-lazy="lazy">非鱼墙绘 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-1.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">画家张路华的个人网站,直接采用微企点预设的元素组件、通栏、单页、模板,自由搭配,灵活替换,大大提高了建站效率,展示专业炫酷。</p>
							<h6 class="animate-text" data-lazy="lazy">张路华官网<span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-2.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">比较了不少建站工具,发现微企点是建站平台中操作便捷,设计风格也是时下时尚的,非常符合领思官网的定位和审美。</p>
							<h6 class="animate-text" data-lazy="lazy">领思云  <span class="slider-auther">CEO 郭雨剑</span></h6>
						</div>
						<img src="images/section-bg3-3.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">山里鲜是一个电商网站,对于网站功能的要求高。微企点内外兼修,除了能实现炫酷展示,还有强大的网站功能,满足营销推广所需。</p>
							<h6 class="animate-text" data-lazy="lazy">山里鲜 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-6.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">用微企点做了一套内画鼻烟壶网站,这是一个对设计师友好的建站工具,让不懂代码的人也能做网站。功能简洁易懂,小白大牛都适合。</p>
							<h6 class="animate-text" data-lazy="lazy">鼻烟壶 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-5.jpg" alt="" />
					</div>
				</div>
				<div class="swiper-pagination swiper-pagination-two"></div>
			</div>
			
		</div>
		
	</div>
	
</div>


<div style="height:540px;"></div>


<script type="text/javascript" src="js/banner.js"></script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
彩乐分析 www.806216.com-金牌98c彩票网址| www.31rx.com-星期天彩票开奖吗| www.274900.com-体育彩票七位数开奖| www.76he.com-彩票开奖走势大全| www.ii66.com-新彩吧3b字谜| www.752767.com-彩票挂机论坛| www.869762.com-下载体彩排列五开奖| www.977620.com-网上买世界杯彩票| www.gh29.com-福彩有没有一分快三| www.63bp.com-体育彩票大乐透奖励| www.8833.red-九宫图能算彩票吗| www.13.net-彩678能赚钱吗| www.118829.com-uu直播彩票官网| www.202264.com-贵州省体彩中心| www.777336.com-球彩下载-| www.9398.biz-彩票先后走势图| www.018369.com-高倍率彩票网| www.089361.com-江苏快三稳定计划| www.015925.com-幸运彩票是骗局吗| www.388963.com-华彩人生一点通新版| www.431611.com-时时彩追号技巧| www.569525.com-彩票中奖打官司案例| www.672570.com-彩八仙ios-| www.783663.com-互联网售彩开放| www.890030.com-哪个高频彩app好| 91彩票www.9155d.com| www.082040.com-新2彩票论坛网址| www.607052.com-淘宝彩票手机版下载| www.cp6657.com-app福彩-| www.566136.com-cp12彩票下载| www.900852.com-嬴钱彩-| www.2471.pw-好彩网首页下载| www.810031.com-彩票电子竖屏走势图| www.951306.com-噢客彩票网-| www.5682.biz-手机快三怎么玩的| www.045587.com-彩票代理按天反佣金| www.678262.com-特彩把旧原版| www.1199.cc-799彩票下载安装| www.66uf.com-福利彩票22选5| www.s69.org-时时福彩下载安装| www.3821.in-大乐透彩票预测号码| www.460027.com-南方双彩断组| www.7753.biz-买彩票感想-| www.go23.com-新疆风采喜乐彩| www.00780.com-3d牛彩涂迷总汇图| www.923883.com-骰子彩票-| www.25224.com-十分彩网可靠吗| www.049577.com-彩票的推算规律| www.441586.com-众彩乐公司是哪里| www.211111.com-湖南福彩网官网| www.4767.me-鸳鸯彩票-| www.91164.com-好彩绿免税-| www.805570.com-网上买彩输了很多钱| www.7359.pw-上海市体彩中心官网| www.899642.com-xy313幸运彩| www.690615.com-最好的彩票销售软件| www.856911.com-恒丰国际博彩| www.699939.com-福彩昨天中奖号码| www.le.cc-极速快三开奖历史| www.5422.vip-彩钢瓦光伏安装价格| www.969165.com-天天彩票网可靠吗| www.531219.com-彩铅手绘星空图片| www.cp320.com-湖北快三玩法规则| www.594849.com-三彩夏装新款连衣裙| www.395454.com-澳门全天彩是真的吗| www.667789.com-5937彩票网址| www.bu67.com-五省快三开奖结果| www.42qx.com-彩钢棚做法详细图解| www.378334.com-七彩娱乐账户登陆| www.yw.com-彩票快三骗局| www.576246.com-快三输钱怎么要回来| www.019722.com-369官方网彩票| www.881325.com-红牛彩票快三计划员| www.255110.com-时时彩专业版| www.689030.com-山东七乐彩晓艳之声| www.7008.vip-福彩3d2d怎么打| www.83166.cc-3d高频彩是真是假| www.502658.com-多彩投坑人-| www.066602.com-哪些彩票网站比较大| www.03ue.com-兰花图片手绘彩铅画| www.67pd.com-福彩三d小军第五版| www.07775.cc-中彩的那天-| www.294670.com-牛彩网蓝琪儿断组| www.wf71.com-今天福彩出奖号码| www.249.biz-品牌彩妆排行榜| www.957930.com-中国体育彩票兑奖| www.141214.com-杨哥说彩今天| www.940542.com-台北快三技巧| www.43re.com-精彩无比什么意思| www.jk9.com-江苏快三助手快彩| www.769.xyz-头彩彩票app下载| www.6090.net-碧彩-| www.17580.cc-14场胜负彩投注| www.263979.com-购彩大厅彩票合法吗| www.581102.com-足彩任九场投注秘诀| www.nb5.cc-福彩3d和值表图| www.940234.com-吉林快三网站有哪些| www.2361.org-七乐彩今日开奖码| www.827533.com-腾讯三分彩看走势| www.1581.vip-彩票收藏到哪里卖| www.293770.com-19046胜负彩| www.482251.com-彩票刮刮奖图片| www.767988.com-体彩一周开几次| www.970461.com-彩票带单的怎么赚钱| www.wx45.com-福利彩票七乐彩| www.4415.vip-幸运赛车彩票官网| www.563023.com-9a彩票app下载| www.292783.com-易彩快三计划计划网| www.856341.com-手机彩易网-| www.mo50.com-网络福彩快三可靠吗| www.513313.com-大星彩票网走势图| www.99606.cc-华人官方彩票登录网| www.333270.com-玩彩票怎么规划本金| www.637120.com-彩虹六号哪个版本| www.518566.com-市福彩中心级别| www.14tq.com-安徽体彩中奖| www.018926.com-福彩3d缩水器下载| www.801879.com-福彩中心电话| www.99211.com-足彩365的是什么| www.681015.com-辽宁福利彩票中心| www.w20.vip-诺亚彩票ios下载| www.279361.com-彩票幸运号码占卜| www.29dj.cc-搜狐彩票手机版下载| www.426878.com-福利彩票什么时间开| www.61le.com-心脏彩超误诊率高| www.52667.cc-好运彩票赚钱| www.8694.cc-彩票大乐透前几期| www.507731.com-七彩平台怎么样| www.527895.com-百乐娱乐时时彩注册| www.33816.cc-浙江福彩专业版| www.761527.com-钟嘉欣好彩妹| www.257900.com-福利快三充值券| www.01.org-11选5大彩鲸官网| www.686048.com-福彩福利彩票app| www.oa1.cc-甘肃快三专家推荐| www.616747.com-体彩排3跨度振幅表| www.912380.com-南湖东路附近体彩店| www.659206.com-多玩彩票是真的吗| www.88cc.com-彩票如何不输钱| www.3204.org-网上玩彩为什么总输| www.873145.com-贵州省体彩助理| www.871084.com-彩票投注资金计划表| www.28328.cc-天下争霸彩票合法吗| www.861382.com-体彩选三选五| www.4847.cn-彩票导报彩票与生活| www.823923.com-牛彩网吧-| www.982045.com-福利彩票开奖器| www.55eu.com-体彩和福彩是一家吗| www.008249.com-七星彩开奖信息查询| www.830981.com-新彩网手机版的吗| www.954730.com-竞彩串关技巧| www.13378.cc-豪彩vlp6us-| www.300978.com-白菜免费送彩金| www.555249.com-必红彩票下载| www.689.xyz-彩票中一亿收多少税| www.890328.com-360足彩比分直播| www.576452.com-广西快三多久开奖| www.527052.com-600万彩票冒领| www.395775.com-抖音彩虹鸭-| www.167739.com-皇都彩票快3| www.688714.com-广州福彩投注站| www.871060.com-彩票站如何选位置| www.712862.com-网赌分分彩先赢后输| www.905708.com-一分快三怎样看大小|