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.738638.com-福彩输了很多钱| www.896949.com-下载广西福彩票| www.970649.com-凤凰彩票微信群| www.nb89.com-彩票360购彩大厅| www.5vy.com-微信分分彩网| www.77sw.cc-六台彩迷宫在哪看| www.2862.cn-福彩排五开奖结果| www.9234.pw-乐彩网是合法的吗| www.96222.com-体彩足球胜负推荐| www.077160.com-青海快三网站| www.154286.com-足彩单关历史走势| www.274652.com-时时彩总和规则| www.376590.com-澳门5分彩-| www.514606.com-护肤品彩妆加盟| www.593573.com-鞍山七彩化学怎么样| www.675373.com-下载鸿博彩票软件| www.761621.com-竞彩优化工具| www.886208.com-彩票遗漏值研究方法| www.974946.com-棒棒彩票app下载| www.kp.com-手机购彩票软件| www.qt11.com-李永志彩票案结果| www.15qm.com-福利彩票门口对联| www.464.com-探探上全是彩票托| www.5003.com-吉祥彩网址-| www.10808.cc-苏州体彩网开奖结果| www.58686.com-徐文轩福彩3d讲座| www.055896.com-福彩快三可信吗| www.146728.com-信誉最好的购彩平台| www.248316.com-08彩票-| www.329104.com-福彩快三今日走势图| www.416068.com-uc彩票靠谱吗| www.526673.com-vr彩票哪里可以玩| www.657117.com-时时彩能买吗| www.756229.com-甘肃福彩.快三| www.865561.com-福利彩票加盟多少钱| www.943850.com-江苏体彩手游下载| 竞彩网www.8jcw.com| www.ej24.com-彩票开奖双色球字谜| www.xs72.com-彩票688下载| www.26kj.com-澳客电脑竞彩版| www.1020.link-亿万彩票-| www.8003.loan-博彩nba软件| www.31188.com-新彩吧字谜汇总| www.80803.cc-下载旺彩大乐透| www.039117.com-七彩格子app| www.162817.com-湖南福彩动物总动| www.258731.com-中国足彩网新版本| www.336245.com-上海福彩选四预测| www.420323.com-9亿彩票的计划网| www.525909.com-甘肃快三交流群| www.646212.com-老彩民计划-| www.735520.com-3d彩票中奖概率| www.812003.com-福彩造假事件| www.886534.com-中彩网快三助手下载| 华夏彩票www.hx1111.com| www.dm96.com-快三快投第一门户| www.vw73.com-彩票基本常识| www.16pd.com-k菜彩民福地| www.3863.biz-福彩三d谜语图| www.9564.com-太阳2彩票网可靠吗| www.59662.cc-赢彩彩票246| www.021087.com-拉菲彩票手机版下载| www.127453.com-好运彩骗我了怎么办| www.254482.com-好彩网app-| www.376372.com-安徽体彩中奖| www.873292.com-中彩网幸运快三| www.956885.com-k·h百彩网-| 大赢家彩票平台www.068639.com| www.hx43.com-彩乐汇是不是假的| www.zv06.com-重庆时时彩官方投注| www.29ex.com-体彩中奖号码是啥| www.1100.top-竞彩总进球全包打法| www.7897.cc-什么平台有香港快三| www.29322.com-网络彩票作弊软件| www.91733.cc-26号福彩开奖结果| www.063132.com-彩票站怎么加盟代理| www.182058.com-上海快三奖金规则| www.255893.com-彩乐园app-| www.327368.com-银川福彩大奖| www.397205.com-体彩春节后开奖时间| www.555338.com-彩计划app9cb| www.623191.com-福彩体排列三走势图| www.694801.com-运盛彩票官网| www.802007.com-彩票站出兑-| www.877794.com-福彩3d三毛全图| www.980867.com-福彩店怎么盈利| www.ct02.com-亚洲彩票都谁被骗过| www.vh40.com-苏州福彩双色球开奖| www.67yo.com-彩票3d水果图| www.2663.biz-安全的彩票app| www.04894.cc-今日福彩3藏机图| www.80080.com-凤翔彩票怎么注册| www.074756.com-彩富网快码-| www.155020.com-竞彩单关查询| www.313231.com-大发彩票坑人| www.381725.com-泰安福彩投注站| www.512575.com-野生动物的彩铅画| www.582622.com-手机看彩票软件| www.657723.com-安微快三最大遗漏| www.766133.com-猜单双的彩票叫什么| www.855379.com-定位胆是彩票的吗| www.919023.com-博彩软件哪个好| www.976964.com-新疆福利彩票喜乐彩| www.yp1.com-大神怎么玩高频彩| www.sb64.com-福彩快乐12开奖| www.12ak.com-制作一个彩票app| www.79iv.com-小鹿彩票重庆时时彩| www.1494.win-彩票顶呱呱-| www.9252.biz-大乐彩怎么提现| www.46670.com-五分彩正规的平台| www.89753.cc-彩票主任事件| www.044799.com-七星彩票彩种| www.143544.com-彩票网有风控审核吗| www.220272.com-彩帝彩票安卓版| www.289337.com-快三单式中两个号码| www.393234.com-长春体育彩票过户| www.514955.com-彩妆专卖店-| www.580288.com-江苏快三全能版计划| www.650599.com-云南休彩11选5| www.751811.com-一元钱彩票首页| www.887312.com-亿发彩票是不是骗局| www.964401.com-人人快三骗局| 尊彩www.030953.com| www.gf88.cc-快三游戏改革| www.wg24.com-江苏快三大小走势| www.09xi.com-双色球众彩网筱杉| www.74ej.com-排三彩票专家预测| www.1216.xyz-华彩控股股价| www.04131.com-彩麒麟骗局-| www.63133.com-中国足彩网客户端| www.089004.com-90后中彩票10亿| www.185398.com-福彩快三手机版| www.256244.com-彩之乐app-| www.345017.com-彩票公司电话| www.419268.com-开家福利彩票店| www.514605.com-美国彩票代购网站| www.579709.com-七星彩剧透-| www.650748.com-十字彩网址多少| www.808945.com-北京时时彩走势图彩| www.876236.com-约彩365靠不靠谱| www.952060.com-903彩票-| www.991667.com-安徽福彩快3官网| www.cp425.com-凤凰私彩彩票官网| www.kp10.com-彩票快三概率| www.zw63.com-江苏利彩票开奖结果| www.39wz.cc-七星彩奇偶单双预测| www.1603.org-吉林快三怎样选号| www.7880.cm-智胜彩票app下载| www.22130.com-山东体彩论坛手机版| www.60607.cc-云南十一选5爰彩乐| www.026861.com-辉煌彩票官网| www.091960.com-体育彩票竞彩| www.148399.com-体彩购彩客户端| www.249019.com-好运来彩票网| www.311044.com-釉中彩餐具安全吗| www.372633.com-遇到彩虹代表什么| www.453445.com-彩滨熊猫-| www.532937.com-福利彩8官网| www.652665.com-必发彩票秒速时时彩| www.727038.com-乐彩网彩票走势图| www.791486.com-开体彩店要准备什么| www.865636.com-多年研究快三心得| www.950698.com-福彩3d杀码软件| www.994107.com-海南体育彩票飞鱼|