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.09ol.com-爱乐透彩票官方旧版| www.09782.com-彩90app-| www.5356.biz-牛彩彩票合法吗| www.022241.com-正规的快三软件下载| www.236875.com-足彩今日稳胆| www.327244.com-三地彩票图-| www.657364.com-掌舵者彩票团队| www.670649.com-彩票店怎么兑奖| www.779365.cc-福彩3d双彩网论坛| www.78218.com-优的体育彩票| www.096921.com-多彩网三地图迷| www.055305.com-喵彩彩票正规吗| www.213255.com-彩票系统app开发| www.309078.com-快三有多少几率中奖| www.642004.com-台湾时时彩官方网站| www.618833.com-新浪彩票大乐透竞技| www.620788.com-福彩三d字画谜| www.476801.com-大乐彩票-| www.501098.com-希腊五分彩app| www.062429.com-福龙彩票全民快三| www.161325.com-福彩自助终端代理| www.76866.cc-福彩三d预测最准确| www.2638.com-福彩3d之家开奖| www.026819.com-网上的01彩票犯法| www.637907.com-中国体育竞彩店转让| www.0ft.com-内蒙古快三看准豹子| 大赢家彩票平台www.586031.com| www.82bq.com-竞彩大咖ios| www.92776.com-今天福彩双彩论坛| www.099036.com-体彩大乐透走势表| www.188346.com-安徽时时彩玩法| www.019950.com-四川体育彩票兑奖| www.220665.com-彩神网站-| www.325730.com-内蒙福彩双色球中奖| www.769937.com-55彩票app-| www.884299.com-福彩3d和值2元网| www.965470.com-亚博彩票是合法的吗| www.wb.com-福彩论坛17500| www.eu1.com-快三秒热水器价格| www.161184.com-清乾隆多种釉彩大瓶| www.010390.com-杭州市福彩兑奖地址| www.237406.com-中彩网双色球走势| www.857108.com-菲律宾马尼拉彩票| www.963062.com-4场进球彩分析| 博乐彩票www.622209.com| www.317188.com-时彩怎么玩都是输| www.270237.com-彩票主任是什么梗| www.3226.xyz-头奖彩票公告暂停| www.992627.com-福州双色球快三| www.824800.com-今天小小鱼彩吧图库| www.9160.org-红宇体彩店官网| www.58375.com-苏快三是什么彩票| www.718678.com-彩虹在爱情里的含义| www.568886.com-幸运十分彩官网| www.696176.com-3cp上彩票平台| www.789918.com-广西快三和值规律| www.886541.com-体彩七星彩论坛| www.961859.com-彩吧网更懂彩民| www.cai8188.com快三走势图今天吉林| www.2341.vip-三分时时彩精准计划| www.539425.com-彩票是什么纸做的| www.623232.com-sk国际网络彩票| www.02756.com-找一下江苏快三| www.70230.com-福彩3d网-| www.37xy.com-买七星彩用什么软件| www.881883.com-体育彩票下期预测号| www.526198.com-足彩必中秘诀| www.751446.com-永盛彩票网官网| www.853707.com-竞彩开奖结果彩客网| www.929766.com-最新彩票指南彩报纸| www.995866.cc-苹果足彩app| www.na46.com-58彩票网是黑彩吗| www.15467.com-嘉兴体彩阳光征召| www.030663.com-彩票大小技巧| www.543913.com-彩票挂是什么意思| www.624456.com-广东福彩开奖查询| www.142460.com-258竞彩app-| www.223942.com-百盈快三赢钱的技巧| www.494939.com-博彩彩票游戏| www.605161.com-无忧彩票-| www.33357.cc-东南快三查询| www.721750.com-足彩单场胜平负比分| www.92nr.com-三d彩票玩法介绍| www.012109.com-昨天晚上彩票中奖号| www.095675.com-中国彩吧2019| www.208571.com-天天彩票安全下载| www.339621.com-玄武彩票网站| www.457166.com-恒彩登陆-| www.184620.com-北京福彩快三预测圈| www.11481.com-乐乐彩票下载| www.986966.com-冠赢彩票app| www.ky99.cc-彩票app白菜大全| www.73lz.com-快三分分彩全天计划| www.8946.vip-全民手游彩票| www.213144.com-彩票平台搭建一条龙| www.183499.com-山西福彩快三走势图| www.590030.com-dd彩票官方网站| www.691676.com-大乐透彩乐乐机选号| www.779332.com-手机网投天天中彩| www.854662.com-360竟彩足球| www.311843.com-福彩周刊电子报| www.139404.com-彩票66倾家荡产| www.291387.com-私彩黑平台-| www.6645.net-福彩体彩网互动专区| www.902975.com-彩票网站建设怎样做| 500彩票www.51515d.com| www.526237.com-科彩印务-| www.657419.com-七星彩前四位缩水软| www.652153.com-平台彩种齐全| www.785127.com-七星彩数字计算规律| www.920968.com-彩票争霸v-| www.rf9.com-高手彩坛-| www.604576.com-未来彩票-| www.457627.com-恒彩是不黑平台| www.585857.com-ip彩票代玩-| www.939323.com-快三大小单双怎么压| www.008952.com-福彩3d模拟器投注| www.17701.cc-彩票信用盘-| www.104038.com-今日竞彩预测| www.028464.com-快三黑彩能玩吗| www.255703.com-买快三的方法| www.341185.com-拉萨体彩中心在哪| www.428688.com-双色球新浪彩票网| www.325885.com-神马彩票下载| www.200035.cc-幸运彩走势图| www.728743.com-辽宁福彩网首页| 博乐彩票www.567106.com| www.347822.com-七乐彩票充值正规吗| www.482020.com-彩票分析选号下载| www.570516.com-七彩云南翡翠店| www.636148.com-彩虹6号墨冰价格| www.707938.com-地下六仺彩开奖结果| www.770309.com-好彩4味爆珠| www.hd32.com-999彩票平台| www.35348.com-天津体彩论坛网| www.872090.com-贵州省体彩兑奖地址| www.86vz.com-彩票五一中彩下载| www.119754.com-丹东福利彩票打票员| www.232160.com-旺彩专业3d-| www.309485.com-福利彩票3d排序| www.395126.com-彩虹代刷网正版搭建| www.561877.com-免费彩金领取38| www.656919.com-国内官网正规彩票| www.850734.com-买彩票什么时候截止| www.939864.com-彩神大发快三口诀| 网易彩票www.074wy.com| www.27ep.com-哈市买彩票书| www.1515.in-内蒙古体育彩票中心| www.en83.com-快三秒热水器原理| www.zd37.com-快三走势河北| www.34ow.com-彩运来官网登录下载| www.736491.com-彩虹六号ela| www.822915.com-粉百合彩吧3d字谜| www.240399.com-彩神外挂-| www.571413.com-彩虹六号围攻女角色| www.727317.com-快3福彩开奖号| www.314011.com-福彩3d新玩法规则| www.313358.com-上海体育彩票11| www.013245.com-开心七星论坛彩网| www.513256.com-爱购彩计划网页| www.589318.com-南国彩票精彩论坛规| www.a08.top-网络彩票快三诈骗| www.3902.vip-威彩580-| www.26qo.com-北京福彩加盟条件|