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.ef83.com-中国福建体育彩票网| www.833991.com-红好彩香烟多少钱| www.945870.com-重庆时彩技巧论坛| 福利彩票www.78700h.com| www.2314.wang-彩吧图库3d第五版| www.45454.com-微彩站二维码| www.956633.com-玩彩有赢的吗| www.9nt.com-七星彩生日姓名选号| www.095105.com-福彩双采图-| www.922887.com-河南彩色沥青颜料| www.987493.com-乐彩网排列三走势图| www.at22.com-广东福彩快3怎么玩| www.92875.com-九亿彩票合法吗| GO彩www.gei30.com| www.023984.com-海外足彩-| www.113501.com-四川快三查询结果| www.206342.com-重庆快三开奖结果| www.875379.com-河南福彩中心| www.jj67.com-手机微信买彩票| www.4qp.cc-怎么买才能中彩票| www.810.date-彩宝贝彩票杀号定胆| www.7407.loan-色彩静物构图| www.52319.cc-网上购彩票最新消息| www.021268.com-山东福彩网下载| www.605856.com-新q彩网-| www.794104.com-棋牌彩票手机版下载| www.939765.com-彩票中奖窍门| www.ca7.com-福彩快3软件下载| www.l93.cn-天天爱彩票安全吗| www.332.la-彩票一块钱中多少| www.6182.com-光大彩票app下载| www.39311.com-今日中彩是不是稳赚| www.026573.com-澳门博彩五星| www.141898.com-竞彩猫是什么| www.235239.com-7070彩票安装| www.367748.com-刚力彩芽有什么背景| www.cai1861.com福彩3d太湖字谜| www.14qc.com-手机版百乐彩怎么玩| www.490023.com-永博国际网上彩票| www.375282.com-ttcp彩票官网| www.8791.in-ai彩预测-| www.50912.com-乐盈彩票是真的么| www.020440.com-彩38软件-| www.120946.com-福建福彩快三玩法| www.382648.com-19027胜负彩| www.504322.com-彩排解释-| www.628009.com-12生肖彩票248| www.755806.com-183彩票-| www.950.net-彩票均衡理论| www.27327.cc-彩票稳赚计划| www.000422.com-山西体育彩票站点| www.634664.com-七彩音符里的音乐| www.095611.com-b爱彩乐-| www.927078.com-妹夫彩票中530万| www.mg86.com-盈彩网是真的吗| www.2926.org-彩票竞猜足球| www.50013.com-金拐神彩专家专栏| www.220436.com-快三预测神器软件| www.787714.com-神马六给彩票| www.0rl.com-ibb娱乐彩票官网| www.705.mobi-串关足彩计算公式| www.118168.com-渐江体彩网下载| www.83sg.com-彩菊字的含义| www.662607.com-170彩票最新消息| www.840365.com-足彩缩水大师破解版| www.294.hk-彩票打错老板不赔| www.629393.com-一分赛车彩票官网| www.cp0208.com-信誉彩票下载| www.578863.com-彩票店内照片| www.654978.com-小辣椒七星彩下载| www.8533.top-中国竟彩网店内频道| www.970232.com-甘肃福彩快三遗漏号| www.858194.com-国外博彩违法吗| www.x90.top-天天彩票有棋牌吗| www.j72.me-速赢彩平台下载| www.69zf.com-彩虹六号倍镜怎么装| www.uk12.com-破解腾讯分分彩| www.867965.com-特区彩票网网站| www.718916.com-羽泉彩虹女生翻唱| www.185068.com-彩票66安卓-| www.887097.com-富彩彩票靠谱吗| www.590113.com-广州体彩兑奖中心| www.688570.com-广东体彩电话业务| www.960491.com-中三亿彩票-| www.yr54.com-今日快三中奖规律| www.9539.cm-网易云彩票-| www.339467.com-内蒙ⅱ选五彩票| www.382978.com-香江彩app-| www.803449.com-今天武汉快三慢跳| www.3614.net-连红彩票下载| www.5240.win-体彩彩票骗人| www.o18.net-买东西送彩票| www.700777.com-竞彩兑奖期限| www.290180.com-快三2分彩-| www.797660.com-芒果彩票app下载| www.5606.cm-高频彩票的危害| www.918395.com-重庆彩票中心嘉州| www.055549.com-好彩网软件下载| www.5052.biz-属羊人买彩票的数字| www.884006.com-黑彩快三赚了几十万| www.45017.com-利民彩票论坛| www.327862.com-南方双彩三d技巧| www.870161.com-分分彩计划软件大全| www.720980.com-快中彩开奖结果| www.553273.com-香港彩富网mt49| www.281603.com-赢彩王手机免费版| www.505374.com-博彩王超级自助软件| www.858379.com-bb3d是黑彩吗| www.244157.com-彩票走势-| www.585849.com-福利彩票买那种好| www.925929.com-中国福利彩票说明书| www.vm55.com-快三半顺什么意思| www.46444.cc-宁夏好彩快三| www.978.cm-七星彩两个号码| www.118345.com-饿了么赠送彩票| www.817681.com-福彩千禧开机号| www.952997.com-九州彩票快三| 福彩www.26878h.com| www.672590.com-湖南彩票论坛首页| www.08co.com-初学者临摹彩铅画| www.251162.com-福中彩票下载| www.752627.com-三宝乐购彩票| 购彩在线www.66332d.com| www.232094.com-福利彩票如何选号码| www.368976.com-尼彩手机为什么倒闭| www.566121.com-兑彩票站注意事项| www.665653.com-彩票视讯app下载| www.16784.com-3d彩迷-| www.209025.com-快三代理一般多少点| www.639457.com-开一家体彩店| www.123488.cc-牛彩网辽宁真人| 购彩在线www.66332q.com| www.04133.com-彩票工具一今曰运势| www.8810.cc-福建体彩最快直播室| www.226415.com-彩票被骗120万| www.vf99.com-上海福彩快三遗漏号| www.70600.com-彩吧彩票合法吗| www.868.org-彩铅纸-| www.365409.com-广东体彩网点扫码| www.72858.cc-福彩杀码高手| www.fx58.com-黑彩被骗报警有用吗| www.36kw.com-703彩票合法吗| www.81db.com-7星彩每周开奖时间| www.380554.com-体彩预测号码推荐| www.jp38.com-传奇彩票骗局揭秘| www.3613.me-连红彩票安卓版下载| www.3030.tv-5050彩票太假了| www.854687.com-广西快三会作假吗| www.25ky.com-上海华彩咨询集团| www.693083.com-u9彩票u9cc-| www.876119.com-广西快三开奖结果牛| www.943001.com-南宁体彩中心| www.979182.com-福利彩票官网客户端| www.0942.vip-福彩农场开奖| www.6846.vip-今晚3d彩报-| www.18708.com-彩票336cc-| www.61250.com-105时时彩app| www.010776.com-491彩票港彩| www.078284.com-福彩网是不是假的| www.136422.com-彩77安卓-| www.189130.com-彩票500期-| www.752992.com-彩票1比2-| www.901416.com-排列三牛彩l网预测| www.03308.com-高频彩票害人不浅|