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天

知道了
亚洲28 www.7287.in-ig官方彩-| www.997241.com-体彩3d1000期| www.na44.com-微彩吧苹果下载安装| www.965007.com-今天体彩开奖时间| www.rl7.com-红牛彩票app| www.106896.com-网上时时彩彩票漏洞| www.385396.com-酷彩吧网页版登陆| www.7076.cm-分分彩八码倍投| www.983620.com-西安彩票站投诉电话| www.fz25.com-彩票追号追死人| www.a37.loan-多期彩票怎么兑奖| www.522286.com-彩票店名字大全| www.620963.com-彩钢板房顶防水| www.233367.com-快三邀请码可以获得| www.498066.com-神兽竞彩团队公众号| www.88oc.com-开设私彩-| www.38sq.com-彩铅画嘴唇工具| www.9ql.com-体彩福彩哪个卖的好| www.016593.com-河北快三遗漏号| www.4466.me-彩薇花生产厂家| www.95737.com-竞彩足球必中神单| www.069750.com-彩票跨度怎么分析| www.141171.com-老猫治彩-| 众彩网www.88065d.com| www.468.in-总球e彩-| www.5956.cn-西安市体彩管理中心| www.16386.cc-台湾大福彩中奖号码| www.17788.cc-网络竞彩骗局| www.70899.cc-玩彩票平台犯法么| www.x55.biz-雪缘园竞彩足球比分| www.167256.com-北京快三走势图表| www.396068.com-彩虹约定儿歌歌词| www.55399.com-英国彩票-| www.0781.net-足彩足球比赛| www.895049.com-网络快开彩合法吗| www.623769.com-台湾快三网站| www.777750.cc-我中啦彩票走势图| www.982910.com-河北福彩下载安装| www.zc98.com-发彩平台下载安装| www.62sd.com-双色球彩票奖金计算| www.2956.cc-qq彩票登录不了| www.11491.com-彩乐乐彩票网合法吗| www.81714.com-工人买彩票一夜暴富| www.078950.com-彩牛彩票安卓| www.204163.com-彩迷app官方下载| www.299593.com-98123彩票网| www.440990.com-体育彩票如何投注| www.640566.com-新浪爱彩提不出了| www.940624.com-彩票500网开奖| www.3957.org-709彩票苹果下载| www.264406.com-北京快三精准计划表| www.226250.com-彩票带单老师的秘| www.353903.com-彩票查询快乐十分| www.509553.com-三星福彩app| www.625020.com-博彩推广引流| www.41829.com-彩票12软件-| www.020265.com-彩票计算器双色球| www.cp2499.com-福彩快三输了50万| www.671409.com-彩乐园app1-| www.236181.com-胜负彩澳客网| www.444963.com-下彩网020-| www.709551.com-下载彩神vlll| www.890800.com-彩票快三破解公式| www.885460.com-云彩宝彩票怎么样| www.6503.org-斗牛娱乐彩票游戏| www.055309.com-可以看快三的app| www.202606.com-湖北快三玩法与技巧| www.273187.com-福彩文化理念是什么| www.13915.cc-竞彩对冲-| www.cai617.com-快三助手破解版下载| 凤凰彩票www.77802c.com| www.80lp.com-500万彩票网招聘| www.913206.com-怎么注册彩票账号| www.9393.biz-润发彩app-| www.hh19.com-全能中彩彩票下载| www.616638.com-云顶国际博彩怎么样| www.106936.com-辽宁福彩双色球官网| www.663553.com-下载百度彩票app| www.469705.com-宁夏快三中奖助手| www.783459.com-七乐彩摇一摇选号机| www.477002.com-黑河福彩中心主任| www.290035.com-彩票大赢家快3骗局| www.502130.com-彩票职业玩家必备| www.734919.com-在手上怎么买彩票| www.888637.com-福建即时彩开奖结果| www.nn49.cc-竞彩官网下载| www.72vj.com-彩票幕后老板是谁| www.6650.top-彩迅pc开奖-| www.cai6789.cc-快三彩票群真的假的| www.800794.com-福彩3d天天图| www.212665.com-500私彩平台| www.336971.com-广西快三大小计划| www.500033.cc-078彩票网址多少| www.627789.com-中彩彩票充值没到账| www.266122.com-取消彩票高频游戏| www.499796.com-什么是腾讯5分彩| www.620754.com-秒速时时彩稳赚技巧| www.775445.com-福彩3字谜字迷总汇| www.871592.com-胜负彩缩水过滤软件| www.bg41.com-一分快三计划稳定| www.s89.com-微信合买彩票| www.237604.com-河南体彩网首页| www.473939.com-南京体育彩票网点| www.664976.com-快三网站排行| www.826017.com-快三有首充平台| www.993736.com-老马足彩推荐| www.559623.com-喜彩15886注册| www.005519.cc-福彩七乐彩单式开奖| www.345242.com-淘宝现在能买彩票吗| www.604141.com-无限彩票-| www.795078.com-重庆时时彩下注平台| www.964082.com-湖北体彩网首页| www.69529.cc-吉祥彩票开发| www.2601.wang-电信彩铃免费吗| www.288380.com-安徽快三和值奖金| www.237228.com-合肥快三公交| www.443822.com-尼彩手机系统下载| www.6559.com-九号彩票购彩大厅| www.265509.com-乐彩论-| www.981884.com-体彩七星彩一等奖| www.88730.com-广西双彩综合走势图| www.535985.com-购彩大厅全部| www.318595.com-三分钟福彩跑马彩票| www.95ym.com-彩友多怎么样| www.900438.com-河十一选五爱彩乐| www.00sl.com-易赢彩票平台可靠吗| www.485587.com-魔兽炫彩之剑| www.678659.com-彩吧代理申请| www.852290.com-梦见结婚谈彩礼钱| 亚投彩票www.ya055.com| www.361159.com-三滴彩票-| www.686221.com-彩色混凝土着色地坪| www.882896.com-彩票的流水是什么| www.kl3.com-彩票中奖的真实案例| www.05gr.com-彩铅画渐变教程图解| www.524506.com-送8彩金彩票app| www.568998.com-正规彩票店买黑彩| www.pk26.com-竞彩怎么判断冷门| www.326.live-色彩静物调色公式| www.ss79.com-买彩票感应最快的咒| www.5632.com-天福彩票图片| www.515162.com-七星彩三字定多少钱| 天天彩票www.2373e.com| www.kk39.com-安徽快三48-| www.375097.com-买五分彩走势图| www.794277.com-贵州快三走势彩经网| www.044414.com-点外卖送彩票| www.5312.org-福州市体彩店| 人人彩票www.rrle6.com| www.60553.com-彩票如何预测大小| www.402941.com-众益彩票官网| www.267137.com-19052足彩-| www.518881.com-彩票如何上亿元| www.691882.com-体彩二维码能兑奖吗| www.fm3.com-安徽快三怎么玩| www.368698.com-七星彩小说阅读| www.725424.com-彩票可以控制吗| www.883033.com-万美娱乐彩票| www.949342.com-dd福彩注册-| www.du28.com-贵阳福彩兑奖中心| www.043121.com-体彩宣传图片| www.77386.cc-手机彩票能玩吗| www.663463.com-国乐彩彩票-| www.848038.com-彩票怎么看几等奖|