QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > swiper仿阿里云官网导航图片切换代码

原创商用 swiper仿阿里云官网导航图片切换代码

swiper.js基于animate动画库制作阿里云官网顶部导航菜单和banner图片切换结合布局代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="top">
	<div class="bar">
		<div class="logo">
			<img src="statics/images/logo.png" />
		</div>
		<div class="bar_menu">
			<ul>
				<li>
					<a href="#"><i></i> 购物车</a>
				</li>
				<li>
					<a href="#">控制台</a>
				</li>
				<li>
					<a href="#">文档</a>
				</li>
				<li>
					<a href="#">备案</a>
				</li>
				<li>
					<a href="#">邮箱</a>
				</li>
				<li>
					<a href="#">登录</a>
				</li>
			</ul>
		</div>
		<div class="area">
			<span>中国站 <i></i></span>
			<ul>
				<li>
					<a href="#">
						<span class="nav-site">中国</span>
						<span class="nav-lang">简体中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">International</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">简体中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">???</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">繁體中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">Deutsch</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">Fran?ais</span>
					</a>
				</li>
				<li class="line"></li>
				<li>
					<a href="#">
						<span class="nav-site">Australia</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">Malaysia</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">Singapore</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">United States</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">中國香港</span>
						<span class="nav-lang">繁體中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">中國台灣</span>
						<span class="nav-lang">繁體中文</span>
					</a>
				</li>

				<li>
					<a href="#">
						<span class="nav-site">日本</span>
						<span class="nav-lang">日本語</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="search">
			<input type="text" name="keyword" placeholder="ECS" />
			<div class="search_icon"></div>
		</div>
	</div>
	<div class="nav">
		<ul>
			<li>
				<a href="#">最新活动</a>
			</li>
			<li>
				<a href="#">产品</a>
			</li>
			<li>
				<a href="#">解决方案</a>
				<div class="son">
					<div class="list">
						<h4 class="title">通用解决方案</h4>
						<p>
							<a href="#">网站</a>
						</p>
						<p>
							<a href="#">IPv6<i>NEW</i></a>
						</p>
						<p>
							<a href="#">企业互联网架构</a>
						</p>
						<p>
							<a href="#">网络<i>NEW</i></a>
						</p>
						<p>
							<a href="#">云存储</a>
						</p>
						<p>
							<a href="#">迁移</a>
						</p>
						<p>
							<a href="#">区块链<i>HOT</i></a>
						</p>
						<p>
							<a href="#">SAP 云</a>
						</p>
						<p>
							<a href="#">VMware 云<i>NEW</i></a>
						</p>
						<p>
							<a href="#">智能客服</a>
						</p>
						<p>
							<a href="#">AIOps故障管理</a>
						</p>
						<p>
							<a href="#">企业效能</a>
						</p>
						<p>
							<a href="#">容器服务深度学习</a>
						</p>
						<p>
							<a href="#">数据传输</a>
						</p>
						<p>
							<a href="#">数据库灾备</a>
						</p>
						<p>
							<a href="#">企业级分布式数据库<i>NEW</i></a>
						</p>
						<p>
							<a href="#">可信数字内容版权服务<i>NEW</i></a>
						</p>
						<p>
							<a href="#">移动研发平台</a>
						</p>
						<p>
							<a href="#">钉钉小程序</a>
						</p>
						<p>
							<a href="#">短视频</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">行业解决方案</h4>
						<p>
							<a href="#">新零售<i>HOT</i></a>
						</p>
						<p>
							<a href="#">新金融</a>
						</p>
						<p>
							<a href="#">新制造</a>
						</p>
						<p>
							<a href="#">新能源</a>
						</p>
						<p>
							<a href="#">新技术</a>
						</p>
						<p>
							<a href="#">智能工业</a>
						</p>
						<p>
							<a href="#">大游戏</a>
						</p>
						<p>
							<a href="#">大视频</a>
						</p>
						<p>
							<a href="#">大传媒</a>
						</p>
						<p>
							<a href="#">大健康</a>
						</p>
						<p>
							<a href="#">大政务<i>HOT</i></a>
						</p>
						<p>
							<a href="#">体育</a>
						</p>
						<p>
							<a href="#">交通物流</a>
						</p>
						<p>
							<a href="#">教育</a>
						</p>
						<p>
							<a href="#">房地产</a>
						</p>
						<p>
							<a href="#">汽车</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">安全解决方案</h4>
						<p>
							<a href="#">等保合规安全</a>
						</p>
						<p>
							<a href="#">新零售安全</a>
						</p>
						<p>
							<a href="#">政务云安全</a>
						</p>
						<p>
							<a href="#">互联网金融安全</a>
						</p>
						<p>
							<a href="#">游戏安全</a>
						</p>
						<p>
							<a href="#">社交/媒体spam</a>
						</p>
						<p>
							<a href="#">混合云态势感知</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">大数据解决方案</h4>
						<p>
							<a href="#">智慧场馆<i>NEW</i></a>
						</p>
						<p>
							<a href="#">智能设备搜索</a>
						</p>
						<p>
							<a href="#">大数据仓库</a>
						</p>
						<p>
							<a href="#">云上数据集成</a>
						</p>
						<p>
							<a href="#">台风路径分析</a>
						</p>
						<p>
							<a href="#">工业大数据服务</a>
						</p>
						<p>
							<a href="#">企业数据服务</a>
						</p>
						<p>
							<a href="#">智能旅游</a>
						</p>
						<p>
							<a href="#">手机数据</a>
						</p>
						<p>
							<a href="#">VR应用开发</a>
						</p>
					</div>
				</div>

			</li>
			<li>
				<a href="#">定价</a>
			</li>
			<li>
				<a href="#">ET大脑</a>
			</li>
			<li>
				<a href="#">数据智能</a>
			</li>
			<li>
				<a href="#">安全</a>
			</li>
			<li>
				<a href="#">云市场</a>
			</li>
			<li>
				<a href="#">支持与服务</a>
			</li>
			<li>
				<a href="#">合作伙伴</a>
			</li>
		</ul>
		<a class="register" href="#">免费注册</a>
	</div>
	<div class="banner">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide blue-slide" style="background: #3857AD;">
					<img src="statics/images/banner1.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<img src="statics/images/banner2.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
						<h1>表格存储TableStore 升级发布会</h1>
						<p>更加灵活的查询能力与数据实时消费通道</p>
						<a href="#">了解更多-></a>
					</div>
					<img src="statics/images/banner3_bg.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
						<h1>Cloud Toolkit 全新升级支持 RDS MySQL</h1>
						<p>插件自动化部署,大幅提升开发部署效率</p>
						<a href="#">了解更多-></a>
					</div>
					<img src="statics/images/banner4_bg.png" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
						<h1>消息队列(MQ )全产品线升级</h1>
						<p>发布AMQP,兼容开源RabbitMQ,支持HTTP协议,推出7种多语言客户端</p>
						<a href="#">了解更多-></a>
					</div>
					<img src="statics/images/banner5_bg.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
	<div class="recommend">
		<ul>
			<li>
				<a href="#">
					<h2>云服务器特惠</h2>
					<p>限时5折,降低采购和运维成本,助力中小企业成长</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>Hi购季特权</h2>
					<p>“按月付款+包年折扣”两者兼得,两成首付轻松上云</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>阿里云 IoT</h2>
					<p>《智造将来》传递科技温暖,智能人居平台助力养老科技</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>DataWorks流计算平台</h2>
					<p>支持DAG与SQL模式互相转换,可视化拖拽开发实时计算</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>MongoDB游戏解决方案</h2>
					<p>完备的部署形态,适配多种游戏架构</p>
				</a>
			</li>
		</ul>
	</div>
</div>

<script>
	var mySwiper = new Swiper('.swiper-container', {
		loop: true,
		effect: 'fade',
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
		autoplay: {
			delay: 5000, //1秒切换一次
		},
		on: {
			init: function() {
				swiperAnimateCache(this); //隐藏动画元素 
				this.emit('slideChangeTransitionEnd'); //在初始化时触发一次slideChangeTransitionEnd事件
			},
			slideChangeTransitionEnd: function() {
				swiperAnimate(this); //每个slide切换结束时运行当前slide动画
			}
		}
	});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

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

签到成功!

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

知道了
东京好运彩 www.562866.com-三分彩官方下载| www.oz94.com-彩票宁夏中奖| www.74yl.com-体彩怎么看中奖号码| www.88530.com-香港6118彩票| www.48976.com-北京5分pk彩| www.031997.com-七星彩开结果奖历史| www.813194.com-体彩黑龙江11| www.943328.com-福彩快三开奖视频| 中国福利彩票www.3478.cc| www.116263.com-500w足彩-| www.731407.com-彩色纸箱生产厂家| www.861982.com-东城福利彩票店转让| www.076368.com-49彩票手机版下载| www.77544.com-平特精版料彩图| www.696945.com-2019年彩票放假| www.395744.com-周一开奖的彩票| www.279215.com-快频彩票官网下载| www.366860.com-彩铅手绘麋鹿图片| www.274739.com-大发时时彩中奖说明| www.213854.com-彩神网平台下载| www.346438.com-高频时时彩开奖| www.508568.com-花画图片大全彩铅画| www.624628.com-七彩应用-| www.318468.com-双彩球今天奖| www.405794.com-重庆时时彩倍投方法| www.522633.com-分分时时彩追号计划| www.596316.com-白银区福彩中心| www.676211.com-彩7彩票开奖结果| www.751080.com-速彩沈宇骗局| www.822846.com-星彩网是真的吗| www.903328.com-彩票166手机登陆| www.969615.com-福利彩票谁中过大奖| www.ob21.com-大彩鲸快三助手| www.85554.cc-彩票翻倍计算| www.zo11.com-足彩胜负平玩法说明| www.50ax.com-足球彩比分500万| 500彩票www.303053.com| www.52nu.cc-时时彩缩水助手| www.683083.com-彩500平台-| www.800061.cc-3d彩票-| www.198543.com-湖北体彩网-| www.903669.com-金冠彩票入口| www.973330.com-彩虹岛m-| www.036163.com-统计学怎么研究彩票| www.211003.com-网上彩票骗局| www.157678.com-足彩买胜负怎么样| www.301071.com-存1元送38元彩金| www.931120.com-犀牛彩票平台| 大赢家彩票网www.178651.com| www.761202.com-彩礼钱是给谁的| www.903177.com-关于159竞彩足球| 网易彩票www.wycp1.com| www.pn38.com-3d彩圣字谜今天| www.57mg.com-福彩25万的游戏厅| www.4064.in-彩票概率统计公式| www.13299.cc-中国竞猜网新浪爱彩| www.970873.com-迷彩兔软件-| www.im6.com-快三专家预测推荐| www.62fr.com-ff14仙人彩规则| www.038488.com-彩票63手机app| www.1005.cc-福利彩票收银| JJ彩票www.647311.com| www.39779.cc-梦见刮彩票上瘾| www.22668.com-彩票老势走势图下载| www.wa19.com-彩02彩票平台| www.368785.com-728down彩票| www.586365.com-分分彩口诀手机版| www.788064.com-波叔竞彩最新消息| www.6321.top-甘肃福彩双色球| www.739.in-时时彩怎么对压互补| www.7976.xyz-排3杀号定胆彩宝贝| www.826623.com-网上彩票恢复时间| www.891986.com-中国体育彩-| 盛大彩票www.aj3383.com| www.099080.com-彩票出票后能取消吗| www.44761.com-美国一分彩-| www.2622.cn-刷快三套利方法| www.082015.com-中彩网彩民论坛| www.714571.com-彩神1怎么玩| www.019407.com-贵州彩票领奖地址| www.5244.com-彩票派彩什么意思| www.625027.com-下载933时彩| www.631484.com-彩名堂计划网弊端| www.478885.com-99彩票怎么样| www.605661.com-富鱼彩票-| www.677685.com-快三和值计算下一期| www.762459.com-极速时时彩官方下载| www.890429.com-快三怎么顺龙砍龙| www.983104.com-彩客竞彩下载| www.kt59.com-上海福利彩票选四| www.84.me-九亿彩票怎么提现| www.83iq.com-彩票组合公式算法| www.5737.wang-失控的黑彩刘雪龙| www.450.in-体彩专家三天计划| www.28qo.com-彩票挂机软件论坛| www.2781.biz-兰州彩民中奖| www.795102.com-七乐彩票主页| www.940317.com-我的彩票登陆头彩| www.998233.com-七星彩加急版一夜谈| www.ai12.com-7星彩最准专家预测| www.887970.com-彩票推广-| www.ot72.com-2019彩票新规| www.135221.com-雷诺好彩1-| www.507669.com-微信彩神vll| www.357157.com-浙江年会中彩票| www.480019.com-七星彩计算法| www.555456.com-凤凰平台彩票合法不| www.622933.com-乐发彩下载-| www.686519.com-500彩票全天计划| www.5288.me-七星彩19079期| www.285172.com-826彩票平台| www.47pz.cc-盈彩吧app下载| www.1329.com-七星彩往期开奖记录| www.cai9994.com内蒙快三走势图表| www.517889.com-迷彩虎讲堂-| www.390679.com-彩民算不算赌徒| www.559021.com-福利彩票走点图| 818合彩www.www.9889hc.com| www.dh42.com-七星彩游戏规则| www.zk69.com-ios彩票-| www.20xa.com-足彩妖刀竞彩推荐| www.306405.com-977彩票是哪的| www.391946.com-天喜彩票-| www.478856.com-竞彩冷热指数| www.343258.com-a9彩票官网-| www.420369.com-中博彩票怎么样| www.180400.com-内蒙古快三号码遗漏| www.537332.com-哪个网络彩票安全| www.170042.com-快三彩票下载安装| www.208533.com-体彩竞猜足球比分| www.289575.com-凤凰私彩平台手机版| 亿彩彩票www.588yc.com| www.134379.com-福体彩开奖话题页| www.759983.com-时时彩全天计划版| www.818871.com-彩票筛选-| www.896058.com-武威快三-| www.0pe.com-天天彩票助手源码| www.635838.com-彩虹六号围攻豪华版| www.715312.com-竞彩网电脑版首页| www.799975.com-福彩双色球直播现场| www.874086.com-体育彩票查询排列三| www.941022.com-彩票客源-| www.990458.com-体彩网点-| www.9870.in-全国体育彩票试机号| www.735155.com-福彩快三线上投注| www.858637.com-彩神幸运飞艇安卓| www.160275.com-爱心彩app-| www.559024.com-包头市体彩中心位置| www.689543.com-必发彩票线路| www.289947.com-贵州快三玩法规则| www.jy94.com-新浪彩票下载安装| www.12my.com-吉林省快三调整| www.0351.cn-苹果手机彩票客户端| www.8883.cm-体彩限制-| www.590616.com-河北彩礼地图| www.965692.com-五分快三倍投的赢法| www.8hv.com-爱彩骗局-| www.129200.com-彩虹旗论坛-| www.197706.com-3d走势图彩宝网| www.678214.com-福盈门彩票准成么| www.810976.com-足彩18168推荐| www.874347.com-吉林快三初几开始| www.926386.com-7彩乐-| www.971425.com-福彩三d奥秘|