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.096355.com-四川体彩兑奖地址| www.35643.com-快彩数据专家注册| www.94496.com-体育竞彩外围| www.067848.com-搭建网络彩票源码| www.165951.com-手机认证送彩金| www.506891.com-彩神彩票黑钱吗| www.613214.com-彩票程序源码手机| www.198023.com-河南快三最大遗漏值| www.333556.com-买东西送彩票违法吗| www.529309.com-大佬彩票平台| www.382436.com-自动挂机彩票| www.212123.com-网上买快三中奖高| www.320328.com-苏快三号码走势| www.397935.com-点击彩是骗人的吗| www.252510.com-彩票比例倍投技巧| www.140026.com-贵阳福彩网站| www.231883.com-彩飘-| www.316683.com-彩票图标大全| www.398232.com-廉江七星彩群| www.505726.com-有职业玩彩票的吗| www.577276.com-甜蜜蜜彩票糖果| www.652077.com-江苏快三开挂软件| www.735460.com-多玩彩票app| www.809519.com-全彩助手不能提现| www.10317.com-看彩啦双色球预测| www.076738.com-体彩排列三预测推荐| www.039633.com-网络彩票漏洞群| www.172561.com-三分快三彩票| www.692603.com-移动积分怎么换彩票| www.787728.com-万彩吧彩票势图| www.860277.com-五分钟时时彩计划| www.939577.com-福彩在线注册大小| www.990067.com-福彩乐彩网-| www.op1.com-江苏快三精准预测| www.055783.com-破解快三软件提款| www.0516.xyz-梦想彩票网可靠吗| www.664386.com-官方网上售彩| www.797138.com-艾彩trample| www.893179.com-屠龙勇士潘森炫彩| www.993507.com-体彩竞彩几种玩法| www.fm26.com-贵州福利彩票网| www.421967.com-福彩3d加奖多少钱| www.eu94.com-8888彩票大骗局| www.379550.com-世爵国际重庆彩真假| www.631009.com-彩运宝安全吗| www.544433.com-红中彩票平台登录| www.661486.com-779彩票网站| www.916238.com-彩93平台靠谱吗| www.985663.com-众彩网排列三千里马| www.dh05.com-彩票多少钱一张| www.zj30.com-江苏快三独胆怎么买| www.xj45.cc-湖南快三开奖结果| www.160923.com-北京开彩票站赚钱么| www.hu63.com-彩票app下载安装| www.29va.com-长春体育彩票过户| www.949168.com-福利彩票有什么| www.030951.com-永乐彩票下载| www.946.me-365彩票网下载| www.9590.cm-体彩稿件-| www.40566.com-掌优彩票是正规的吗| www.90899.cc-万达彩票抽奖中心| www.051972.com-106时时彩下载| www.143733.com-体彩分析预测软件| www.8106.cm-彩票黑科技软件下载| www.zy83.com-何振东竞彩-| www.70nh.com-乐博彩票是真是假| www.509089.com-中国体育彩票投诉| www.4458.com-福彩三d图迷总汇| www.fi50.com-彩票注册成功送彩金| www.012428.com-赢彩王收费怎么办| www.59115.cc-2019彩票店提成| www.881712.com-彩票包赔导师| www.988377.com-副利彩票开将结果| www.kw79.com-省份快三什么意思| www.2786.cn-手机体彩山东| 凤凰彩票www.77801c.com| www.ot33.com-中国福利快三玩法| www.31ds.com-南京体彩中心图片| www.p96.club-博大彩票下载| www.1482.pw-k彩娱乐官网| www.999999.com-彩民村大乐透走势图| www.lo23.com-彩票每日存送| www.3112.pw-云南福彩弃奖| www.9090.live-儿童彩铅画图片蛇| www.38313.com-万购彩是什么东西| www.266014.com-宁夏彩票中奖| www.422611.com-彩乐乐群英会下载| www.369670.com-彩票解封账号| www.820624.com-七星彩梦-| www.914756.com-优信乐彩-| www.975043.com-彩票扫描查询选号| www.cai9997.com快三图表大全星彩网| www.357.cm-境外博彩诈骗| www.562253.com-江苏快三号码预测| www.626354.com-彩生财-| www.683150.com-哪个平台有幸运快三| www.757797.com-众彩易购是假的吗| www.855152.com-新浪爱彩买票靠谱吗| www.921800.com-彩神争8靠谱吗| www.973834.com-模拟彩票投注技巧| www.cai876.com-快三口诀逢3下15| www.72hk.com-足彩竞猜301| www.00346.com-销售体育彩票申请书| www.411834.com-竞彩对冲保本打法| www.217894.com-鸿博彩票手机端下载| www.352665.com-小伙彩票过期| www.505954.com-福利彩票中心鲍学全| www.d81.xyz-hk彩票网址大全| www.54uf.com-福彩三d最新开奖| www.0671.vip-四川体彩网七星彩| www.6628.cc-手机256彩票下载| www.677733.com-双色彩票开奖| www.9861.vip-足彩销量-| www.57829.cc-爱乐透彩票新版网址| www.837603.com-滚球对冲竞彩技巧| www.cai921.com-河南快三走势图今天| www.917230.com-星空彩铅画教程| www.111.me-zc557众彩网| www.318944.com-海南快三彩票| www.44sb.com-河北快三是啥| www.003.biz-美国的高频彩票| www.8193.cc-澳彩相同初赔| www.1bg.com-彩票冷热什么意思| www.95345.com-体彩是怎么玩的| www.97686.cc-nba每日推荐竞彩| www.557863.com-多多彩票app| www.666998.cc-七乐彩奖金二等奖| www.735156.com-五百万彩票邀请码| www.947391.com-福彩七加一多少钱| www.873837.com-3d彩票玩法介绍| www.955935.com-最近足彩胜负彩预测| 500万彩票www.01500w.com| www.in48.com-怎么在手机上买福彩| www.8877.link-足彩8串1中奖难吗| www.089285.com-金福彩票网怎么投诉| www.604809.com-掌中宝彩票-| www.717961.com-彩票断组什么意思| www.776320.com-福州彩票中心图片| www.044806.com-928彩票官方网站| www.920373.com-玩彩票赚钱注册账号| www.tw35.com-36o购彩大厅| www.615058.com-河南快三下注平台| www.862609.com-七乐彩开奖时间结果| www.981181.com-下载宝发彩票app| www.028797.com-旧彩吧网-| www.172387.com-青岛快三彩票| www.498981.com-百万彩票是真的么| www.621880.com-宁波彩票中奖投注站| www.868141.com-重庆时彩现在开奖| 500彩票www.50026c.com| www.t74.cn-乐喜彩票网的真假| www.1971.me-龙的快三彩票| www.00357.com-双色彩票开奖查询| www.43411.com-旺彩超级大乐透| www.217663.cc-够力五星彩-| www.7422.xyz-音乐色彩构成图片| www.733485.com-全民彩票张公岭| www.728834.com-体彩结果开奖查询| www.894099.com-997彩票app-| www.974004.com-南宁快三秒奶茶原料| www.08mg.com-体彩今日开机号码| www.956446.com-彩泥手工-| 非凡彩票www.77210j.com| www.977249.com-濮阳油田彩礼新规定|