QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper仿华为云官网banner图片轮播代码

原创商用 swiper仿华为云官网banner图片轮播代码

jQuery基于swiper制作华为云官网大气响应式的banner图片幻灯片轮播切换和产品列表布局代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" href="statics/css/swiper.css" />
<link rel="stylesheet" href="statics/css/animate.min.css" />
<link rel="stylesheet" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.10.1.min.js"></script>
<script src="statics/js/swiper.min.js"></script>
<script src="statics/js/swiper.animate1.0.2.min.js"></script>

3、body引入HTML代码

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide slide1">
		</div>
		<div class="swiper-slide slide2">
			<div class="inner">
				<img src="statics/images/words2.png" class="ani img1" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
			</div>
		</div>
		<div class="swiper-slide slide3">
		</div>
		<div class="swiper-slide slide4">
			<div class="inner">
				<div class="banner-text ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
					<h3><em>[ 限时免费 ]</em></h3>
					<h2>专属云<em>0元试用</em></h2>
					<p>专家团1V1量身定制,打造您的云上专属头等舱</p>
					<span class="btn-primary" href="javascript:">免费申请</span>
				</div>
				<img src="statics/images/image-main4-r.png" / class="ani img1" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
				<img src="statics/images/image-sub4-r2.png" / class="ani img2" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
			</div>
		</div>
		<div class="swiper-slide slide5">
			<div class="inner">
				<div class="banner-text ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
					<h3><em>[ 限时免费 ]</em></h3>
					<h2>专属云<em>0元试用</em></h2>
					<p>专家团1V1量身定制,打造您的云上专属头等舱</p>
					<span class="btn-primary" href="javascript:">免费申请</span>
				</div>
				<img src="statics/images/image-main5-r.png" / class="ani img1" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
				<img src="statics/images/image-sub5-r2.png" / class="ani img2" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
			</div>
		</div>
	</div>
	<div class="pagination"></div>
	<div class="cover"></div>

	<div class="home-events">
		<div class="home-events-box" style="min-height:30px;">

			<div class="home-events-box-wrapper" style="min-height:30px;">

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon6.png" alt="免费体验专区">
				<img src="statics/images/events-icon6-active.png" alt="免费体验专区">
			</i>
						<h2>免费体验专区</h2>
						<p class="js-title" title="">热门云产品0元试用</p>
					</a>
				</div>

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon1.png" alt="特惠专区">
				<img src="statics/images/events-icon1-active.png" alt="特惠专区">
			</i>
						<h2>特惠专区</h2>
						<p class="js-title" title="">云服务器首购5折</p>
					</a>
				</div>

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon2.png" alt="严选商城">
				<img src="statics/images/events-icon2-active.png" alt="严选商城">
			</i>
						<h2>严选商城</h2>
						<p class="js-title" title="">精品应用 一键获取</p>
					</a>
				</div>

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon9.png" alt="5分钟快速入门">
				<img src="statics/images/events-icon9-active.png" alt="5分钟快速入门">
			</i>
						<h2>5分钟快速入门</h2>
						<p class="js-title" title="">轻松上手华为云服务</p>
					</a>
				</div>

			</div>

		</div>
	</div>

</div>


<script>
	var mySwiper = new Swiper('.swiper-container', {
		pagination: '.pagination',
		paginationClickable: true,
		autoplay: 5000,
		speed: 1,
		loop:true,

		onInit: function(swiper) { 
			swiperAnimateCache(swiper); //隐藏动画元素 
			swiperAnimate(swiper); //初始化完成开始动画
		},
		onSlideChangeEnd: function(swiper) {
			swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		}
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
亚洲28 www.011095.com-手机福彩和体育彩票| www.088041.com-南方双彩网首页大全| www.c78.vip-百宝彩网-| www.78ky.com-乐彩29期字谜总汇| www.276125.com-贵州快三预测号码| www.4183.biz-封神国际腾讯分分彩| www.91622.cc-日本好彩好抽吗| www.63887.cc-十四场胜负彩星号| www.113375.com-分分快三规律押注| www.311730.com-福彩3d彩民乐图库| www.8005.me-竞彩足球8串1技巧| www.010670.com-昨天开奖的体彩| www.788454.com-竞彩唯彩看球| www.900158.com-黑龙江快三助手| www.979431.com-彩拾app官网下载| www.ce4.com-好彩1871-| www.785166.cc-大胜彩票信誉怎么样| www.934508.com-彩票动物总动员遗漏| www.87bf.com-时时彩代-| www.181553.com-湖北快三中奖| www.272615.com-pc是福彩的一种吗| www.275294.com-中国体育彩票网首页| www.351844.com-彩票值得吗-| www.431565.com-全球足彩预测网站| www.94909.cc-足彩亚盘分析软件| www.105078.com-新浪爱彩比分直播| www.213819.com-彩神app是真的吗| www.318146.com-彩票有几种-| www.464649.com-体彩大乐透咋样玩| www.874066.com-北京快三走势图查看| www.nq44.com-福彩怎么选号| www.008409.com-彩票挂机软件怎么用| PK彩票www.623190.com| www.958686.com-快三杀码定胆| www.eg00.cc-大联盟彩票是骗局吗| www.v86.top-双色球新浪爱彩| www.338775.com-彩尊国际登陆地址| www.7222.site-900彩票网站| www.3552.win-38免费领彩金| www.905176.com-佛山体彩店转让信息| www.978939.com-聋哑人中彩彩票网| www.sj8.cc-福彩开奖结果查询| www.rk78.com-那个彩票中奖率最高| www.63863.cc-河南订婚彩礼| www.637166.com-小米彩虹电池电量| www.44hy.com-红树林彩票平台官网| www.94126.com-福彩今日新鲜事| www.765867.com-淘宝彩票合买qq群| www.296159.com-彩票双色球开奖时间| www.540751.com-彩票帮助赢软件| www.738676.com-彩神吉林快三| www.910023.com-彩界之首-| www.fi22.com-注册送19元彩金| www.17657.cc-私彩代理加盟| www.76081.com-足彩2串1计算公式| www.930986.com-800彩票网站| www.td58.cc-国彩app下载| www.191917.com-福彩三d走势表| www.748556.com-红彩网邀请码| www.671080.com-彩宝贝排三定3跨度| www.779653.com-135彩票官网| www.0492.cc-360足彩胜-| www.098976.com-五福彩票苹果系统的| www.sy22.cc-七星彩够力画规律| www.796614.com-博众彩数字-| www.0183.cn-深圳国彩防水涂料| www.333380.cc-玩彩技巧后三| www.55756.com-体彩刮刮乐新票图| www.453909.com-体彩竞彩手机版| www.671609.com-特彩吧app狗的号| www.880070.com-詹天佑福彩3d点评| www.997429.com-好运彩平台怎么样| www.sj06.com-竞彩网360彩票网| www.949075.com-热购网彩票-| www.ls19.com-全民乐彩票下载| www.133357.com-彩钢瓦围挡规格| www.790448.com-快三黑彩怎么盈利| www.683109.com-福彩3d图表大全| www.180978.com-河北快三一定牛推荐| www.139944.com-彩16安卓-| www.277751.com-双色球中彩论坛| www.139589.com-上海体育彩票中心| www.227669.com-快三走势图江苏| www.095276.com-彩票平台论坛| www.02ak.com-佛教中彩虹叫什么| www.b05.loan-澳门博彩娱乐城| www.020631.com-手机网上怎样买彩票| www.01804.com-彩票代理返点公式| www.16519.com-美东2分彩人工计划| www.959271.com-3d新彩吧字谜画谜| www.dp98.com-哪个省的快三比较真| www.267877.com-福彩3d采摘网| www.988237.com-掌游彩下载-| www.lj75.com-豪彩投下载-| www.005208.com-广东体彩快乐十分钟| www.562139.com-爱购彩彩票-| www.717536.com-彩客完整比分水位| www.bw46.com-甘肃福彩3d走势图| www.79295.com-体彩线上培训| www.874464.com-吉林快三开奖35| www.952534.com-大奖彩票网跑了| 中华彩票www.9149o.com| www.03he.com-风之彩app彩票| www.971669.com-亿发彩票吧-| www.cc.com-手机购彩平台| www.87783.com-500万彩票网论坛| www.696316.com-小米彩票下载| www.112678.cc-七乐彩查询中奖号码| www.7426.cn-欢迎光临国民彩票| www.778811.com-查银海彩报-| www.838659.com-彩票中奖者故事汇| www.560596.com-云彩网彩票正规吗| www.020871.com-彩票刷流水平台| www.392773.com-卡通彩铅画女孩| www.548444.cc-苹果屏幕原彩是什么| www.543312.com-新彩票开奖结果| www.8853.com-霍华德的彩票书籍| www.89013.com-安徽快三害人| www.026630.com-辉煌娱乐彩票靠谱吗| www.218126.com-华夏彩票官方网站| www.358965.com-微博彩票游戏二维码| www.455119.com-中彩三d走势图| www.12168.com-足球彩票圈论坛| www.855881.com-七乐彩开奖计算器| www.127030.com-彩虹六号季票没了| www.523177.com-重庆桥洞彩票哥| www.13787.com-福彩天地报双色球l| www.08vj.com-尼彩-| www.055903.com-江西快三30期| www.218757.com-全球最大彩票官网| www.336041.com-广西福利彩开奖结果| 通盈彩票www.567620.com| www.ts38.com-安徽快三开奖公告| www.015002.com-彩票中奖牛人爆秘诀| www.yn68.com-彩票带单老师微信| www.0022.biz-美国彩票网中文| www.611310.com-彩31彩票a-| www.37cp.com-鑫彩晨科技怎么样| www.6ip.cc-腾讯分分分彩助赢| www.75rr.com-做5d彩超-| www.713093.com-九州彩票软件分析| www.880850.com-广东快三官网下载| www.969541.com-高频彩追号输| www.qb34.com-新彩网下载-| www.527605.com-时时彩平刷实战经验| www.637101.com-彩虹六号黑号| www.733751.com-做梦彩票中奖新闻| www.yx4.com-冮苏快三开奖公告| www.53066.com-彩票首页_欢迎您| www.93459.cc-山东彩友论坛| www.8205.vip-徐州彩票8000万| www.157513.com-足彩计算公式| www.594559.com-甘肃体彩助手安卓| www.423456.cc-七星彩星期日走势图| www.133683.com-c彩票开奖查询| www.675215.com-众彩网排列三专家| www.6055.in-彩票的选法-| www.303607.com-查询足球彩票| www.425595.com-茗彩注册登录| www.4649.biz-彩票中奖者的运气| www.vm93.com-体彩排列3开奖今天| www.675052.com-汇丰彩票平台靠谱吗| www.787961.com-cb8彩宝彩票官网| www.884129.com-盛彩app-|