• 想家了!红红火火迎新年 青城呼和浩特年味十足 2019-05-16
  • 山西省地勘局211队举办“安全生产月”知识培训--黄河新闻网 2019-05-16
  • 联播快讯:长江镇江段今起实施12天限时封航 2019-05-14
  • 中央环保督察回头看在河北 2019-05-14
  • 各项赛事三连冠之后 RNG距离S8冠军还有多远 2019-05-11
  • 四川黄龙自然保护区第7次发现野生大熊猫踪迹 2019-05-10
  • 拜腾概念车局部图曝光 将于6月12日全球首发 2019-05-04
  • “高深文学创作回顾研讨会”在北京举行 2019-04-29
  • 和平金沙湾社区举行爱我美丽沈阳”端午节活动 2019-04-29
  • 朱德之孙朱和平谈“人民军队的创建” 2019-04-24
  • P2P平台钱满仓人去楼空疑似爆雷 待偿金额超2亿 2019-04-24
  • 哥大在读硕士马健瑞创业 为留学生做“专属保护”装备 2019-04-24
  • 专访香港特区政府财政司司长陈茂波 2019-04-24
  • 习近平要求把这项工作作为重大政治任务 2019-04-19
  • 外媒:C罗与梅西或对战世界杯 “绝代双骄”将写下新故事 2019-04-19
  • QQ客服
    当前位置 : 云南快乐十分前三 > 代码 > 网页特效 > 导航菜单 > swiper仿阿里云官网导航图片切换代码

    体彩11选5开奖结果云南: 原创商用 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天

    知道了
  • 想家了!红红火火迎新年 青城呼和浩特年味十足 2019-05-16
  • 山西省地勘局211队举办“安全生产月”知识培训--黄河新闻网 2019-05-16
  • 联播快讯:长江镇江段今起实施12天限时封航 2019-05-14
  • 中央环保督察回头看在河北 2019-05-14
  • 各项赛事三连冠之后 RNG距离S8冠军还有多远 2019-05-11
  • 四川黄龙自然保护区第7次发现野生大熊猫踪迹 2019-05-10
  • 拜腾概念车局部图曝光 将于6月12日全球首发 2019-05-04
  • “高深文学创作回顾研讨会”在北京举行 2019-04-29
  • 和平金沙湾社区举行爱我美丽沈阳”端午节活动 2019-04-29
  • 朱德之孙朱和平谈“人民军队的创建” 2019-04-24
  • P2P平台钱满仓人去楼空疑似爆雷 待偿金额超2亿 2019-04-24
  • 哥大在读硕士马健瑞创业 为留学生做“专属保护”装备 2019-04-24
  • 专访香港特区政府财政司司长陈茂波 2019-04-24
  • 习近平要求把这项工作作为重大政治任务 2019-04-19
  • 外媒:C罗与梅西或对战世界杯 “绝代双骄”将写下新故事 2019-04-19
  • 体彩四码分布图 广东十一选五 北京赛车微信群 大乐透15021期攻 湖北11选5 体彩超级大乐透走势图 四川时时彩app下载手机版下载手机版 七位数开奖号码 排列5怎样算中奖号码 极速飞艇全天走势图 北京赛车pk10迪士尼 江西时时彩计算软件 体彩排列三走势图 2012双色球基本走势图 今日河南481开奖结果 福彩七乐彩杀号公式