js仿360网站宽屏图片选项卡切换代码



119 475 159



特效描述:js 仿360网站 宽屏图片 选项卡切换,360官网图片切换效果(代码已优化)

代码结构

1. 引入CSS

<link rel="stylesheet" href="style/style.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/113.js"></script>
<script type="text/javascript" src="js/switch.combo.js"></script>

3. HTML代码

<div class="slides">
	<div class="in widget-slide" data-jss="tabSelector : '.slide-nav li', viewSelector : '.slide',autoPlay: true, supportMouseenter: false,mouseenterSwitchTime: 10,animType:'scroll',autoPlayTime:6000">
		<div class="slide-content" style="overflow:hidden;width:960px;position:relative;" id="picslide1_scroll_div">
			<div style="width:10000px;position:relative;" class="clearfix" >
				<!--安全卫士-->
				<div class="slide slide-1" id="tabs_1_cont_1">
					<h1>360安全卫士</h1>
					<h2>界面全新升级,聚焦核心功能,继续引领安全软件行业</h2>
					<a href="#" class="btn btn-8  _download_url_for_bd"></a> <a href="#" class="btn btn-cq"></a>
					<p class="info">v10.0正式版(02月06日更新)</p>
					<a href="#" class="icon  _download_url_for_bd"></a> <a href="#" class="tit"></a>
					<p class="link"><a href="#">[领航版Beta]</a> <a href="#">[离线安装包]</a> <a href="#">[网管版]</a>&nbsp; &nbsp;<a href="#">[MAC版]</a></p>
				</div>
				<!--360杀毒-->
				<div class="slide slide-2" id="tabs_1_cont_2">
					<h1>360杀毒</h1>
					<h2>全球首款永久免费的杀毒软件,全面防御、强劲查杀</h2>
					<a href="#" id="360sd_down"  class="btn btn-3"></a>
					<p class="info">版本:v5.0正式版&nbsp;&nbsp; 大小:<span id="360sd_size">32.6MB</span><br>
					更新:2014-12-02&nbsp;&nbsp; 系统:XP/Vista/Win7/Win8/Win8.1</p>
					<p class="link"><a href="#" id="360sd_win81">[抢鲜版下载]</a> <a href="#">[360网管版]&nbsp;全网杀病毒修漏洞 统一管理企业安全</a></p>
				</div>
				<!--360手机卫士-->
				<div class="slide slide-3" id="tabs_1_cont_3">
					<h1>360手机卫士</h1>
					<h2>AV-TEST全球评测 荣获六次满分 蝉联全球第一</h2>
					<a href="#" class="btn btn-3"></a> <a href="#" class="btn btn-10"></a>
					<p class="info">版本:v5.4.5正式版&nbsp;&nbsp; 大小:16.1 MB&nbsp;&nbsp; 更新:2015-02-02&nbsp;&nbsp; 系统:安卓/苹果/Windows</p>
					<a href="#" class="icon"></a> <a href="#" class="tit"></a>
					<p class="link"><a href="#">[360清理大师]&nbsp;清垃圾、提速度,最强力的清理神器!</a>&nbsp; &nbsp;<a href="#">[360云服务]</a></p>
				</div>
				<!--360安全浏览器-->
				<div class="slide slide-4" id="tabs_1_cont_4">
					<h1><a href="http://se.360.cn/">360安全浏览器</a></h1>
					<h2>网购首选,3亿用户的共同选择</h2>
					<a id="360se_download_1" href="#" class="btn btn-3"></a> <a href="#" class="btn btn-4"></a> <a href="#" class="btn btn-5"></a>
					<p class="info">版本:v7.1正式版&nbsp;&nbsp; 大小:41.14MB&nbsp;&nbsp; 更新:2014-08-21&nbsp;&nbsp; 系统:XP/Vista/Win7/Win8/Win8.1</p>
					<a href="#" class="icon"></a> <a href="#" class="tit"></a> 
				</div>
				<!--360手机助手-->
				<div class="slide slide-5" id="tabs_1_cont_5">
					<h1><a href="#">360手机助手</a></h1>
					<h2>最安全的安卓手机应用平台,手机游戏恶意扣费“先行赔付”</h2>
					<a href="#" class="btn btn-14"></a>
					<p class="info">版本:V3.1.83正式版&nbsp;&nbsp; 大小:7.46MB&nbsp;&nbsp; 更新:2014-12-10</p>
					<p class="link1"><a href="#">[Beta版下载]</a>&nbsp;&nbsp; <a href="#">[PC版下载]</a></p>
					<a href="#" class="icon"></a> <a href="#" class="tit"></a>
					<p class="link2"><a href="# ">[360移动开放平台] 发布应用 免费推广 共享手机助手4亿海量用户</a>&nbsp;&nbsp;<a href="#">[360手机游戏]</a></p>
				</div>
				<!--360企业安全-->
				<div class="slide slide-6" id="tabs_1_cont_6">
					<h1><a href="#">360企业安全</a></h1>
					<h2>云+端+边界,联合防御,共筑企业安全堡垒</h2>
					<a href="#" class="btn btn-13"></a> <a href="#" class="btn btn-11"></a>
					<p class="link"><a href="http://wangzhan.360.cn/">[网站卫士] 防黑 防CC 防DDOS</a>&nbsp; &nbsp;<a href="#">[网站安全检测] 网站安全免费体检</a></p>
					<a href="#" class="icon"></a> <a href="#" class="tit"></a> </div>
				</div>
		</div>
		<ul class="tab slide-nav">
			<li class="selected"><a href="#weishi" class="item-1">360安全卫士</a></li>
			<li><a href="#shadu" class="item-2">360杀毒</a></li>
			<li><a href="#shouji" class="item-3">360手机卫士</a></li>
			<li><a href="#360se" class="item-4">360浏览器</a></li>
			<li><a href="#zhushou" class="item-5">360手机助手</a></li>
			<li><a href="#qiye" class="item-6">360企业安全</a></li>
		</ul>
	</div>
	<p class="mask"></p>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 全屏焦点图 全屏切换 宽屏全屏 导航菜单 图片全屏 图片切换 图标导航菜单 选项卡自动切换 导航菜单插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到