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天

知道了
1分快三 www.180036.com-体彩网走势图| www.441099.com-动态炫彩图片| www.575375.com-体彩一周开几次奖| www.zc48.com-3d彩票图纸| www.39509.com-豪彩网站首页| www.477111.com-六福彩票官方网址| www.617234.com-扬州彩票站转让信息| www.720229.com-彩票每天几点不能买| www.788525.com-365凤凰彩票| www.0001.net-体育彩票电脑版本| www.75353.com-酷8彩票注册| www.085028.com-深圳鑫源彩彩票| www.44661.com-乐彩可靠吗-| www.890377.com-坤彩科技股吧| www.lr75.com-中华彩票网站| www.22679.cc-互联网彩票吃票| www.604884.com-彩44彩票网址| www.507098.com-体育彩票分类| www.104063.com-最贵的好彩香烟图片| www.032916.com-彩票福利彩票快三| www.563546.com-q彩注册邀请码| www.71772.cc-三地彩图迷-| www.098401.com-彩票代玩骗局| www.715812.com-306cc彩票网| www.cp872.com-易彩快三有什么规律| www.1cn.com-彩票赢钱秘诀与技巧| www.88271.cc-哪里下载吉彩宝| www.8995.org-凤凰彩票信誉怎么样| www.oz09.com-宁夏银川福彩中心| www.69775.cc-快三开奖要几分钟| www.097976.com-万彩万彩吧-| www.827811.com-福彩跟单员什么意思| www.b28.in-辉煌彩票官网下载| www.689531.com-齐鲁风七乐彩玩法| www.358385.com-5937彩票-| www.rl33.com-时时彩一码倍投方案| www.05634.com-彩票过滤设置| www.736396.com-面部花草彩绘彩铅画| www.832730.com-七彩图趣味看图测彩| www.928998.com-优彩彩票网-| 众发彩票www.959zf.com| www.389051.com-大佬彩票靠谱吗| www.975149.com-最好的彩票查询软件| www.af69.com-智慧彩官网下载| www.st76.com-时时彩打法-| www.09pw.com-e77.com乐彩| www.041999.com-运用时间差玩时时彩| www.96716.com-阜阳彩票案-| www.1112.site-上海3d彩票-| www.736375.com-p3双彩图谜-| www.829677.com-时彩彩app-| www.853938.com-全民智投彩票| www.025814.com-内蒙古彩票-| www.158374.com-澳客网竟彩-| www.257493.com-快三软件计划| www.331502.com-乐彩网怎么了| www.397601.com-3d彩票今天图纸| www.1592.vip-云南福彩老总| www.640057.com-22彩票网站怎么样| www.958534.com-七星彩粤海局王图纸| www.fg20.com-彩票注册送-| www.v23.cn-在线彩票中奖p图| www.121288.com-网易彩票可信吗| www.738852.com-福彩3d微信公众号| www.063930.com-足球彩票赔率怎么算| www.032915.com-福彩网的邀请码| www.43268.com-豪门旺彩票实战讲座| www.027336.com-体彩外围怎么投注| www.581196.com-体彩世界杯竞猜倍率| www.652972.com-分分彩计划6码| www.2203.net-河北体彩快乐扑克| www.25580.com-国家福彩中心| www.025849.com-喜乐彩票靠谱吗| www.131601.com-彩票未领-| www.238100.cc-福彩中心开机号码| www.359325.com-七彩祥云图片| www.468045.com-体彩顶呱刮中奖技巧| www.2745.pw-福彩快3最好的守号| www.218502.com-私人快三-| www.362592.com-高智商买彩票| www.517938.com-福彩3d开豹子| www.644844.com-体育彩票中奖者| www.779803.com-三弟福利彩票| www.870922.com-江苏快三彩票软件| www.931832.com-体彩总部在哪| www.515991.com-中国福利彩票数字三| www.258595.com-福彩3的杀码| www.333771.com-网上黑彩输了怎么办| www.4286.vip-好彩堂玄机-| www.9900.vip-高频竞彩-| www.78427.com-双彩网官网-| www.338.net-青蛙彩票正版资料| www.5482.vip-长春彩艺-| www.09266.com-彩39怎么下载| www.58190.com-同志软件彩乐| www.000200.com-彩6精华版客服| www.062372.com-北京快三数据分析| www.152215.com-好彩票软件| www.221386.com-博牛彩票注册| www.818200.com-搜狐彩票合法吗| www.909358.com-福彩3d第三版彩图| www.966765.com-宝马彩票彩平台| www.cp9195.com-全能中彩彩票官网| www.jq00.com-内蒙古体彩游泳夺金| www.yz17.cc-彩票离奇故事| www.408754.com-冠军彩票手机版下载| www.019781.com-湖北快三缩水软件| www.317598.com-快三职业彩民| www.88170.com-3d福彩图迷汇总八| www.yq55.cc-彩票照片可以兑奖吗| www.779257.com-圣地彩开奖结果查询| www.879944.com-陕西福彩双色球开奖| www.968615.com-谁有时时彩微信群| 500彩票www.50026r.com| www.bx84.com-彩票专业彩吧助手| www.pl82.com-手机在线山东体彩| www.63215.cc-七情上面的足彩博客| www.775136.com-51彩票上赌可靠吗| www.837282.com-立彩app合法吗| www.900229.com-江苏爱彩乐11选5| www.961127.com-安徽彩票15选5| 福彩迷www.ovfd2.com| www.74638.com-手机竞彩-| www.950674.com-彩运8是什么| 中彩网www.131333.com| www.755895.com-彩色苹果-| www.871320.com-彩71彩票网-| www.946285.com-福建体彩选球软件| www.987114.com-购彩堂官网-| www.sm4.com-江苏快三直选走势图| www.46lv.com-玩竞彩足球能赚钱吗| www.892.win-澳门全天彩-| www.12312.com-小白彩票旧版| www.21470.com-充值8送88彩金| www.58tz.com-百宝彩玩法-| www.ck42.com-吉林快三和值走势| www.569658.com-好彩2赔率多少| www.0359.date-宴飞华休闲快三教学| www.014866.com-彩王-| www.5918.in-彩礼钱超过多少违法| www.303625.com-双彩图3d双采图| www.463355.com-天冠彩票平台| www.586052.com-彩票二等奖要捐款吗| www.215335.com-快彩3-| www.601802.com-男子身无分文中彩票| www.702717.com-彩票赔率是什么意思| www.770711.com-时时彩三星中奖规则| www.856816.com-c6彩票-| www.953615.com-易彩快三高手计划表| 乐购彩www.lg36.com| www.wj96.com-新浪彩票数据| www.5811.net-千百万彩票平台| www.42414.com-金彩虹-| www.831485.com-中彩票离婚要分钱吗| www.891234.cc-幸运时时彩计划网页| www.949305.com-体彩复式-| www.987963.com-全能中彩票-| www.cj7.com-怎样玩快三赚钱| www.797979.com-易彩娱乐平台下载| 盛大彩票www.ct6676.com| www.11400.cc-本月足彩对阵表| www.03ij.com-彩库女装加盟| www.0491.org-360时时彩走势图| www.585171.com-ba彩票网站-|