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天

知道了
强国彩 www.038039.com-彩牛彩票网安全吗| www.187616.com-时时彩开彩结果| www.974871.com-特区彩票论伝| www.8122.pw-体彩大乐透开奖日期| www.yg72.com-玩分分彩有什么技巧| www.838.org-五行绝算彩票下载| www.454583.com-乐彩检疫怎么样| www.558389.com-彩铅动物画图片手绘| www.001070.com-微信快三公众号| www.xi32.com-陇南福彩中心| www.0144.net-彩色怎么造句| www.10373.com-唯彩荐球-| www.540655.com-瑞彩祥云彩票网| www.154265.com-梦见选彩票数字| www.280042.com-超级时时彩开奖结果| www.366657.com-33期体彩中奖| www.379879.com-我在洪荒买彩票| www.32hb.com-彩票实战讲座l一4| www.308558.com-四川竞彩快三查询| www.119329.com-江苏快三中奖牛人| www.791.tv-八卦测福彩-| www.468.in-总球e彩-| www.944988.com-248彩票官网下载| www.cai7822.com长春快三开走势图| www.2313.net-香港陆和彩管家婆| www.319393.cc-网易彩票开奖直播| www.ub70.com-有中4亿彩票的吗| www.45cj.com-福利彩票3d魔图| www.781.red-彩票预测号码31期| www.5671.biz-新加坡4d彩票开奖| www.519223.com-乐盈彩票进不去了| www.890343.cc-快三秒热水器原理图| www.090588.com-博友彩是什么| www.194787.com-彩app-| www.550315.com-七星彩册子大全图片| www.670376.com-百强彩票官网| www.ou51.com-彩票托骗局-| www.370422.com-线上四季彩平台注册| www.731968.com-多彩-| www.654239.com-福彩时时彩开奖号码| www.781541.com-优游彩票软件| www.872108.com-贵阳体彩中心在哪| www.949370.com-36o彩票开奖| 500彩票网www.903559.com| www.pk46.com-中国体育彩票玩法| www.838439.com-8k彩票主页下载| www.916363.com-足彩串场算法| www.096227.com-中彩网杀号定胆推荐| www.616341.com-福彩3d黑胜手图| www.173375.com-大发快三规律破解| www.66057.com-彩票在线机选| www.cai7477.com湖北百宝彩快三| www.774462.com-七乐彩机选十注| www.98014.com-中体彩官网首页| www.591168.com-上海彩礼和嫁妆| www.474.tv-凤凰彩票2320| www.956179.com-14场胜负彩奖金| www.139021.cc-天空彩票软件| www.1003.cm-彩票为什么要抓长龙| www.751.live-时时彩猜数字规律| www.656446.com-k彩怎么进不去了| www.089608.com-518彩网平台| www.019901.com-彩票时时彩哪个靠谱| www.14ec.com-福彩直播秀-| www.023560.com-彩6彩票ios-| www.su11.com-幸运快三首页| www.355144.com-福彩快三太假| www.576141.com-体彩18054期| www.723597.com-彩票指南报纸16页| www.772465.com-时时彩根本不可能赢| www.856083.com-极速一分彩开奖号码| www.913272.com-彩珉之家-| www.973307.com-快三是私人彩票吗| 126彩票网www.738126.com| 博亿彩票www.662by.com| www.3908.vip-七星彩计划软件下载| www.941581.com-博彩行业话术| www.054596.com-亚博体彩app下载| www.139054.com-有盈彩票可靠吗| www.228252.cc-新疆风采喜乐彩| www.603565.com-ag彩票平台官网| www.168617.com-快三复式-| www.541378.com-怎么做线上彩票代理| www.964060.com-体彩14场中奖规则| www.kf05.com-福利彩票奖励规则| www.943598.com-百福彩票官方网站| www.332631.com-彩票热购个人中心| www.562014.com-鸿彩网站-| www.947340.com-彩票外挂软件下载| www.ne00.com-全民福彩是骗局| www.05zu.com-彩铅什么牌子好| www.0311.la-中国彩民统计| www.330087.com-众彩网程远-| www.088972.com-速赢彩app-| www.927927.com-彩票咋个买几个数| www.569.red-天天赢彩票是真的吗| www.357187.com-中彩票不领-| www.03mc.com-红中彩票会员登录| www.984487.com-广西福彩中心地址| www.jc82.com-双色球彩票选号软件| www.669581.com-了解彩票的相关资料| www.888197.com-福彩网彩票代理| www.999662.com-甘肃快三统计| www.gh93.com-广西快三开奖号| www.d54.loan-ai智能彩票-| www.272.win-2014七星彩-| www.092062.com-体彩店加盟-| www.277866.com-山东体彩排列3论坛| www.609531.com-深圳市体彩店转让| www.806050.com-艾彩踩踏登录| www.934308.com-智博彩票代理| www.pp3.cc-新韩国快三-| www.16211.cc-竞彩网pc版-| www.67476.com-彩票为什么不是赌博| www.901318.com-福彩今天开奖号码| www.975792.com-2019年江西彩礼| www.im7.com-大赢家彩票app| www.028141.com-博亚体彩app| www.991676.com-彩吧vip平台| www.ez70.com-靠谱的彩票挂机平台| www.wp14.com-福利彩票走势图样板| www.458505.com-竞彩串关计算方法表| www.100614.com-上期七星彩开奖结果| www.478775.com-足彩任九全包多少钱| www.427910.com-鸿彩网充值-| www.739474.com-头条彩票官网首页| www.861677.com-qq彩票在哪里看| 亚洲www.527477.com| www.87384.com-933彩票安卓下载| www.0370.tv-优美休闲快三教学| www.15jv.com-彩正规澳门彩票平台| www.696.live-篮球彩票算加时吗| www.5334.biz-福彩三地图谜总会| www.05303.com-宝哥彩吧app| www.p26.net-惠泽了优彩社区| www.389070.com-彩煌-| www.1106.in-足彩怎么买中奖率高| www.63604.com-中国竞彩篮球首页| www.838025.com-玩快三真的赚钱吗| www.924318.com-41c彩票-| www.2248.cc-大彩鲸11选五| www.768009.com-官方淘彩网-| www.829876.com-28号彩票-| www.954564.com-彩宝网试机号走势图| www.cp0417.com-福彩河北快三走势图| www.898413.com-福利彩票去哪里查| www.211427.com-河北省快三走勢| www.414021.com-挂彩是啥子意思| www.325672.com-海南今晚七星彩开码| www.185362.com-彩票宗旨-| www.995940.com-19046期胜负彩| www.dc99.com-快三每期开奖时间点| www.8485.cc-易彩娱乐平台| www.58912.cc-体彩七星综合走势图| www.97120.com-竞彩nba怎么投注| www.043166.com-hk百彩网开奖结果| www.132813.com-彩票顶呱刮靠谱吗| www.172178.com-湖北彩票-| www.ca65.com-河北燕赵风彩排列5| www.62tq.com-下彩网页版| www.39564.com-凤凰彩票二分彩破解| www.584687.com-国民彩票是正规的吗| www.662434.com-看更多精彩内容| www.725399.com-体育彩票不是赌博|