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.1637.com-足彩大小球投注| www.02942.com-体彩中一亿大奖| www.71321.cc-博彩漏洞改单| www.47xa.com-彩票360是否合法| www.945.hk-彩票几种玩法| www.34pf.com-七星彩出过豹子吗| www.83165.cc-福彩3d猫腻-| www.125129.com-800彩票-| www.86216.com-手机能买中国体彩网| www.087077.com-四季彩票登录一| www.os87.com-彩客网app旧版| www.83mq.com-三位数的彩票有哪些| www.643163.com-乐彩33破解-| www.859801.com-中博彩票app| www.935342.com-彩票ios版-| www.987644.com-小米官网彩票代购| www.yj7.cc-皇都彩票用户注册| www.723535.com-常州彩票1800万| www.814198.com-河北省快三开奖公告| www.891390.com-福彩刮刮乐广告语| www.957622.com-六禾彩彩票图库| 幸运彩票网www.33598r.com| www.758.website重庆时时彩和值计算| www.7796.vip-我的博彩心得| www.576454.com-乐彩双色球诗迷汇总| www.666082.com-海南七星彩万字表图| www.561.live-分分彩个位判断大小| www.644987.com-彩宝网开奖公告| www.757567.com-信博彩票是假的吗| www.833789.com-大家赢彩票下载安装| www.916262.com-免费送彩金时彩平台| 160彩票www.160wt.com| www.053370.com-足彩任九场投注| www.987384.com-合法的网上彩票平台| www.54sv.com-彩山特曲39度6瓶| www.4355.vip-台台湾福星彩| www.684364.com-福彩三地杀码独醉| www.795299.com-福彩3d怎么守号| www.885929.com-内蒙古呼市体彩开| www.966388.com-网投彩票快三计划| www.yd2.com-大发快三怎样压和值| www.a47.biz-喜乐彩历史中奖号码| www.68du.com-号百彩票上的充值| www.07pi.com-动漫古风彩铅画| www.0447.cc-体育彩票中奖秘诀| www.450638.com-彩票数字3是3d吗| www.7096.vip-合肥七彩教育集团| www.32772.cc-佰万彩票注册| www.726299.com-快三赌博老千| www.51474.com-牛蛙彩票软件安装| www.x32.cc-彩神口诀-| www.82oc.com-体育彩票大乐透杀号| www.12400.cc-今日竞彩胜平负| www.1ed.com-石家庄福彩中心位置| www.29673.cc-酷彩网是骗局吗| www.021582.com-体彩十分钟开奖玩法| www.025589.com-105彩票违法吗| www.366684.com-彩铅调色表格| www.158469.com-足彩几串几最划算| www.625095.com-福利彩票双色球赔法| www.13591.cc-体彩竞彩奖金计算器| www.455740.com-福彩易彩-| www.906228.com-足彩竞彩计算器| www.976128.com-河南林州彩礼钱多少| www.ap09.com-福彩精华布衣天下2| www.sp97.com-南京福彩领奖地址| www.714.tv-重庆时时彩稳输规律| www.5646.pw-被骗网上买彩票| www.11025.com-新势力竞彩微博| www.51872.cc-双彩i论坛首页| www.29lq.com-重庆时时彩胆码计算| www.170811.com-吉林快三动态走势图| www.623106.com-竞彩店logo-| www.682551.com-500彩票网下载| www.759695.com-云彩在线彩票| www.819503.com-彩票统计分析方法| www.881241.com-竟彩专栏-| www.941248.com-彩票吧平台对刷| www.984672.com-极速赛车彩票模拟器| www.n48.net-手机新浪彩票网| www.58dm.com-贵港市福利彩票加盟| www.1184.vip-彩票诗文术语| www.9232.net-鸿运乐彩可靠吗| www.aj12.com-查一下福利彩票开奖| www.tt91.com-乐9购十分彩是什么| www.74sg.com-福彩大厅开奖结果| www.328661.com-免费彩票高手资料| www.507961.com-福彩3d彩票2元网| www.5518.biz-八方彩票网官方端口| www.476933.com-彩经网杀号汇总| www.613283.com-彩票直通车网下载| www.828253.com-网上体彩推荐套路| www.964064.com-极速六个彩开奖结果| www.ft8.cc-快三官方开奖网| www.3qg.com-药京彩怎么使用| www.98hh.com-体彩排列五分析软件| www.1999.biz-足彩跳楼-| www.177454.com-快三中奖助手官网| www.502108.com-体育彩票哪种好一点| www.570275.com-彩票今天开机号| www.713389.com-王者彩票算不算赌博| www.332127.com-凤彩网预测-| www.654706.com-手机快彩是真是假| www.750087.com-彩手机版-| www.8052.vip-水彩画鹤-| www.135415.com-体彩竞彩终端机| www.26qy.com-彩发发软件准吗| www.994583.com-彩票遗漏值技巧| www.f48.com-乐彩网预测靠谱吗| www.55bp.com-鬼六神算福彩| www.008212.com-褔彩选4-| www.080590.com-800彩票网站| www.167988.com-福利彩票快3| www.248866.com-安徽快三号码统计| www.114.win-彩客网合买大厅| www.457335.com-描写中彩票诗句| www.810007.com-中奖号码查询彩票| www.894675.com-投资彩票怎么赚钱| www.959328.com-河北福彩快3带垮| 吉利彩票www.66376z.com| www.267379.com-幸运五星彩开奖号码| www.362040.com-王牌彩票手机版下载| www.512631.com-彩铅画图片卡通整幅| www.594973.com-好彩赢三张下载| www.662903.com-中国体肓彩票app| www.751634.com-彩票怎样买容易中奖| www.806212.com-北斗中彩网-| www.874293.com-2d彩票玩法-| www.206042.com-福彩3地试机号| www.306737.com-比较靠谱的彩票平台| www.580861.com-南国七星彩手机网| www.690014.com-足彩14场星相图| www.867581.com-昨天开什么奖七星彩| 500彩票www.50088c.com| www.yk83.com-长春彩报-| www.829.online-快手直播彩票技巧| www.636.cm-时时彩十二生肖| www.49949.com-神彩飞扬排三预测| www.867756.com-七星彩开奖时间几点| www.247633.com-大发快三吧-| www.137416.com-时时彩返点怎么设置| www.272655.com-广西7乐彩-| www.14ev.com-体彩七星彩结果| www.795.website新3d定位胆彩票| www.6352.xyz-竞彩猫app破解版| www.11331.com-500万彩票网骗局| www.52090.com-福彩快三的倍投方法| www.182353.com-彩票分析软件哪个好| www.238766.com-送彩金的彩票| www.296901.com-惠民彩票网-| www.360105.com-龙岩体彩中奖情况| www.417787.com-体育彩票6加一奖池| www.508085.com-彩铅手绘风景画教程| www.576488.com-唐山福利彩票| www.645681.com-中国体育彩票机选| www.5976.biz-体彩杀号和金码| www.36726.cc-澳门合法彩票| www.101187.com-中彩网开挂-| www.83dj.com-移动彩印设置在哪里| www.49740.com-外围彩票的app| www.982206.com-中华彩票手机版下载| www.am34.com-全国彩票开奖结| www.rd50.com-时时彩遗漏提示软件| www.04vo.com-彩色铅笔画入门|