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.487638.com-彩友多彩票-| www.666629.cc-梦网彩票直播版区| www.820065.com-农村天价彩礼作文| www.788661.com-足彩胜负九场开奖| www.881562.com-柬埔寨波贝博彩公司| www.996982.com-乐盈彩票官网| www.ch99.com-吉林快三我输50万| www.065355.com-彩票33是黑平台吗| www.cp5686.com-分分快三官网| www.52761.cc-七彩山鸡多少钱一斤| www.132365.cc-唐河彩礼-| www.965569.com-胜利彩官方客服| www.be16.com-福彩双色球预测号码| www.232761.com-玩彩票技巧-| www.358938.com-第一次去彩票店| www.600300.com-长春溢彩洗浴坑人| www.rs33.com-彩票杀大赔小的规律| www.413195.com-足彩计算-| www.hj98.cc-福彩字谜大全| www.972389.com-3d彩票魔图-| www.701296.com-盈盛现金彩票| www.974600.com-中奖彩票软件下载| www.750.cn-怎样下载彩库宝典| www.38313.cc-500彩票坑不坑| www.751374.com-爱乐透足彩体彩| www.835156.com-竞彩虚拟足球走势图| www.909007.com-福彩专区-| www.972437.com-彩铅画图片简单| www.cai359.com-彩票平台-| www.mc37.com-手机时时彩网投平台| www.313287.com-上海爱彩乐爱彩乐| www.433453.com-假彩票制作器| www.567286.com-江苏体彩网app| www.849008.com-足彩六场半胜负开奖| www.34mj.com-赢彩王账号-| www.946909.com-北京中彩快印| www.73qk.com-海南排列五私彩软件| www.386323.com-彩票多ip解决方法| www.68127.cc-立彩破解器-| www.968254.com-体彩兑奖有效期| www.iu89.com-彩票倍投怎么算| www.92vn.com-彩票导航平安| www.803044.com-彩票手机购买| www.895400.com-中体华彩合法吗| www.966269.com-香港即时开彩| www.cp315.cc-福彩精彩十分开奖号| 凤凰彩票www.66652a.com| www.ju59.com-彩客网完整版| www.253732.com-香港时时彩官方网站| www.g44.win-3d杀号定胆彩经网| www.91636.com-中免黑好彩-| www.332375.com-竞彩输的倾家荡产| www.366329.com-什么牌子的彩铅好| www.456688.com-彩易达渠道部| www.579902.com-如何加盟彩票投注站| www.680923.com-时时彩倍投法| www.792701.com-西安福彩店转让| www.22de.com-彩名堂3.0.2| www.368145.com-如何画芒果彩铅画| www.544198.com-福利彩票37选5| www.597690.com-海南七星彩精彩论坛| www.690070.com-大乐透中彩网擂台赛| www.38fz.com-外国人能买美国彩票| www.246290.com-江苏体育体彩| www.543282.com-体彩排列三图纸| www.5091.biz-中国彩票历史最大奖| www.26261.com-彩票的种类有哪些| www.984256.com-竞彩猫可以投注吗| www.954116.com-360彩票正规吗| www.cai7377.com上海快三开奖爱彩乐| www.1318.bid-419彩票网站| www.6591.top-彩彩门-| www.79679.cc-网上买足彩是赌博吗| www.074199.com-梦想彩票站是真的吗| www.172153.com-彩迷网开奖-| www.4883.cn-北京pk拾赢彩专家| www.44258.com-买彩票作弊软件神器| www.6815.net-彩票656-| www.399505.com-问题彩民中奖| www.960495.com-大乐透3亿彩票照片| www.cai1212.com江苏快三害死多少人| www.mc08.com-吉林快三黑彩骗局| www.f63.net-幸运时时彩计划网站| www.44hc.com-96彩票网-| www.085603.com-安徽福彩彩票| www.47lr.com-七乐彩质合走势| www.051516.com-赢彩吧打不开| www.24449.cc-古风彩铅画-| www.116230.com-500彩票公司地址| www.bp56.com-首页一新彩票走势图| www.up17.com-福彩3d五行图| www.02868.com-合肥百乐门彩票| www.67677.com-禁止公务员买彩票| www.021237.com-浙江福彩网官方网站| www.098659.com-七星彩官网-| www.e25.club-旺彩百家双色球| www.39nr.com-嘉兴福利彩票网| www.0032.cn-七星体育彩票奖表| www.493342.com-七乐彩彩票开奖时间| www.10817.com-鲸落水彩-| www.230257.com-彩票计划员骗术| www.177536.com-河南福利彩票快三| www.217036.com-省份快三是真是假| www.311659.com-红牛彩票网页版| www.376707.com-彩票有没有开过重号| www.71501.com-网上什么彩票赚钱| www.097976.com-万彩万彩吧-| www.0333.com-11选五5爱彩乐| www.761620.com-彩票九宫八卦图六码| www.873971.com-山西福彩网双色球| www.948256.com-福彩与体彩-| 亿彩堂www.87668f.com| www.788.xyz-体育彩票复式怎么买| www.zy0.com-彩票历史查询器| www.sc07.com-快三机选号码查询| www.260183.com-福彩头奖怎么领取| www.358950.com-彩票可以随机买吗| www.456760.com-今期买马彩图片65| www.553050.com-竞彩让胜什么意思| www.309185.com-伊布都和三彩| www.839266.com-福彩开奖直播新浪网| www.931344.com-买彩票的导师| www.979336.com-旋子彩画手绘| www.cp466.com-安徽快三开奖走势| www.187233.com-时时彩2星走势图| www.900617.com-福彩3d布衣天下图| www.72169.com-网上宝马彩票| www.714445.com-五分彩神计划| www.z19.bid-山东省体彩十一选五| www.556858.com-彩票不如赌博| www.588488.com-白龙彩票-| www.686755.com-中彩那天的阅读答案| www.771065.com-时时彩预警专家| www.852511.com-分分彩挂机是真是假| www.926858.com-数字达人社区彩票| www.984878.com-神彩争霸官网| www.ps1.com-派彩电子走势图官网| www.76uq.com-福彩3d彩票图大全| www.8266.me-杨幂品彩丝袜| www.062872.com-淘宝彩票真实吗| www.117609.com-幸运快三网投彩票网| www.700472.com-九五彩票app| www.781214.com-微彩站中奖了怎么办| www.852994.com-体彩网直播-| www.950274.com-105彩票下载苹果| www.453668.com-爱乐透手机彩票网站| www.221113.com-国家正规彩票网站| www.352644.com-台湾福星彩开奖直墦| www.475507.com-中彩票先交税还是| www.005644.com-彩一预测-| www.275195.com-想中彩票念什么咒语| www.5012.vip-尚合娱乐平台彩票| www.629285.com-搜狗福彩-| www.8619.biz-如何买广电的彩票| www.98180.com-6加1体育彩票| www.984870.com-长城彩票在哪个地方| www.cz72.com-快三跨1是什么意思| www.y91.org-中国福利彩票可靠吗| www.64dk.com-有没有足彩微信群| www.1910.pw-广东松岗东方亮彩| www.bg51.com-快三怎么稳赚| www.095558.com-彩票店的利润| www.14232.com-彩票找平台-| www.87900.com-9万彩票网站是多少|