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.348840.com-彩神预测-| www.2nw.com-彩乐彩客-| www.92ki.com-投彩网网址是多少| www.49cr.com-青岛七彩灯| www.18vr.com-星期五出什么彩票| www.912.live-双色球彩票规律破解| www.9183.cc-六百万彩票网| www.318614.com-福彩3地全图总汇八| www.916659.com-比较稳定的彩票平台| www.fv51.com-彩票排列五开奖| www.171551.com-精彩十分玩法| www.500730.com-什么年代有彩色相片| www.662634.com-在哪能买电子彩票| www.11.link-凤凰彩票平台怎么样| www.783514.com-多乐彩app下载| www.890617.com-手机彩票能不能玩| www.978000.com-富彩彩票是正规的吗| www.bu22.com-网投彩票是什么意思| www.04nd.com-水溶彩铅图片| www.97me.com-福彩3d大全部| www.8970.vip-可以买国彩的app| www.586813.com-立彩彩票怎么赚钱| www.35qw.com-澳门哪里可以买彩票| www.1082.cm-分分时时彩害死人| www.304349.com-中福快三一分钟平台| www.822.tv-p3家彩-| www.261029.com-竞彩官官网-| www.0601.top-淫三国梦想星彩无惨| www.629846.com-网易红彩怎么玩| www.750870.com-u9彩票48.8-| www.838916.com-竞彩足球与外围对冲| www.917978.com-900彩票合法吗| www.993466.com-足彩单固一直买平| www.4yk.com-马来西亚彩云阁酒店| www.092171.com-吉林快三走势图带线| www.301833.com-七星彩头尾百分百中| www.867682.com-海南七星彩最新图规| www.949282.com-快三号码表下载| 天朝彩票www.15259.cc| www.431823.com-同城体育彩票网站| www.561080.com-久游彩票平台半厘| www.635231.com-八面通七彩影院影讯| www.708311.com-正规qq时时彩群| www.793938.com-竞彩篮球稳赢方法| www.877081.com-马耳他的彩票| www.959123.com-赌彩票-| 大赢家彩票平台www.175221.com| www.jb45.com-北京快三输-| www.118140.com-体彩官网电脑版首页| www.252111.com-吉林快三遗漏一定牛| www.69827.com-有盈彩票官网app| www.591959.com-三弟牛彩-| www.676423.com-开奖3d福彩-| www.121485.com-银川彩票转让| www.243459.com-山东福彩电话投注| www.333515.com-彩票数学理论| www.409949.com-广州彩色透水地坪| www.843737.com-公益福彩快三| www.907501.com-胜利彩票登录网址| www.sg89.cc-预测时时彩-| www.23ou.com-足彩总进球数| www.809636.com-彩票组合生成器| www.902281.com-国家怎么不深挖黑彩| www.971716.com-dd彩票app下载| www.be4.com-北京福彩快三预测圈| www.297831.com-贵州快三遗漏图表| www.366329.com-什么牌子的彩铅好| www.5812.biz-体彩2串1赢一场| www.458058.com-福利彩票店挣钱吗| www.bw64.com-福彩快三有什么规律| www.737267.com-迷彩兔-| www.813920.com-内蒙福彩快3一定牛| www.893776.com-大财神彩票园| www.966735.com-河南快三开奖公告| www.cai789.cc-新快三游戏恐龙快打| www.117762.com-竞彩足球竞彩网| www.28682.cc-彩票双色球十大杀号| www.608048.com-河北体彩排列五开奖| www.745686.com-福彩96590-| www.922924.com-网络竞彩平台靠谱吗| 500彩票www.51515z.com| www.529009.com-六壬测福彩3d| www.760161.com-福利彩票店中奖提成| www.578117.com-吉林彩票管理中心| www.5zs.com-大鱼娱乐彩票| www.077691.com-派彩网app下载| www.570701.com-彩乐手机-| www.312853.com-最新彩票网站| www.438490.com-陕西省体彩兑奖流程| www.134806.com-香港好彩四味爆珠| www.34566.com-上海福利彩票排列五| www.09369.cc-好彩1选号规律| www.14562.com-七星彩历史最大奖金| www.116119.com-vr彩票-| www.486496.com-蓝彩仙子女凉鞋图片| www.l24.cc-彩票棋牌-| www.820509.com-福彩3d怪字-| www.95715.com-怎么看彩票真假| www.413.tv-q彩在哪下-| www.824.date-新浪彩票视频直播| www.9327.online7位数体彩中奖号码| www.649847.com-彩色跑活动策划书| www.004548.com-秒彩票开奖-| www.098098.cc-好运彩彩票幸运快三| www.171710.com-贵州快三开奖走势| www.191977.com-福彩网快3真的假的| www.59127.cc-砺儿7乐彩推荐号| www.941822.com-做彩票平台代理收入| 博乐彩票www.35918v.com| www.794786.com-快三和值9多少注| www.875614.com-彩易3d藏机诗| www.953104.com-手机福利彩票下载| www.ge7.cc-江苏快三最新遗漏表| www.351273.com-体彩绝杀一码| www.481508.com-彩印基础包资费| www.578211.com-沈阳彩票快三| www.666249.com-航天彩虹是什么企业| www.741013.com-28彩pc-| www.823711.com-黑彩快三庄家| www.916322.com-送38彩金时时彩| www.979584.com-9万彩票软件安卓| www.ba62.com-多乐彩票是国家的吗| www.tm03.com-481彩票网提现| www.1662.vip-红彩会登录账号| www.359138.com-ok彩票能提现吗| www.186977.com-江苏快三中奖奖金| www.276917.com-彩票总动员走势图| www.485572.com-飞彩网是干什么的| www.634551.com-彩46官方下载| www.5zx.cc-上海众盈彩票娱乐| www.99bj.com-卓越博彩论坛| www.0523.link-福彩今晚开奖号| www.602484.com-瑞典2分彩-| www.143440.com-黑彩代理犯法吗| www.854698.com-快三玩家如何作弊| www.373922.com-辽彩12选5走势图| www.334876.com-今天体彩排五开奖号| www.1219.in-网易的人人红彩票| www.32032.cc-能提现的彩票软件| www.97732.cc-香港时时彩怎么玩| www.101261.com-快三秒酸辣粉| www.io05.com-山东福彩群英会| www.zz53.com-彩票店布局-| www.5fc.cc-彩乃奈奈中文百度云| www.2798.vip-兰州彩票兑奖地址| www.1784.cm-双色球购彩截止时间| www.2908.cc-体彩自助售卖机价格| www.00qm.com-周杰伦彩虹歌词| www.103468.com-大发时时彩是真的吗| www.ju6.com-河南省福彩微官网| www.q36.cn-广西快三合法不| www.79gw.com-分分彩刷流水方案| www.3805.cm-福彩预测号-| www.00331.com-湖北快三和直跨度| www.52844.com-买彩票赌钱输了| www.237072.com-竞彩36o比分直播| www.358151.com-特区彩票论坛手机版| www.010407.com-339彩票网-| www.1762.wang-快三豹子单注多少钱| www.229586.com-吉林快三号码口诀| www.6767.org-788彩票-| www.17015.com-彩票损坏-| www.103.org-福彩的电话号码| 500彩票www.401270.com|