基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码。这款实例适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
在线预览 源码下载
实现的代码。
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> <ahref="#">[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正式版 大小:<span id="360sd_size">32.6MB</span><br>更新:2014-12-02 系统:XP/Vista/Win7/Win8/Win8.1</p><p class="link"><a href="#" id="360sd_win81">[抢鲜版下载]</a> <a href="#">[360网管版] 全网杀病毒修漏洞 统一管理企业安全</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正式版 大小:16.1 MB 更新:2015-02-02 系统:安卓/苹果/Windows</p><a href="#" class="icon"></a><a href="#" class="tit"></a><p class="link"><a href="#">[360清理大师] 清垃圾、提速度,最强力的清理神器!</a> <a href="#">[360云服务]</a></p></div><!--360安全浏览器--><div class="slide slide-4" id="tabs_1_cont_4"><h1><a href="http://***/">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正式版 大小:41.14MB 更新:2014-08-21 系统: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正式版 大小:7.46MB 更新:2014-12-10</p><p class="link1"><a href="#">[Beta版下载]</a> <a href="#">[PC版下载]</a></p><a href="#" class="icon"></a><a href="#" class="tit"></a><p class="link2"><a href="# ">[360移动开放平台] 发布应用 免费推广 共享手机助手4亿海量用户</a> <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://***/">[网站卫士] 防黑 防CC 防DDOS</a> <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>
via:http://***/Article/24007
基于jquery仿360网站图片选项卡切换代码相关推荐
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --><div id= ...
- 基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览 源码下载 实 ...
- 基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览 源码下载 部分代码: <div class=&quo ...
- jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 基于jQuery仿迅雷影音官网幻灯片特效
分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html ...
- 基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- 实现“鼠标移入仿购物网站图片查看细节”功能
写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而"窃喜".如无特殊说明,demo都是 ...
最新文章
- python 把int类型转bytes以及把bytes 转int 类型(使用方法to_bytes ,from_byte, struct)
- mxnet中ndarray*ndarray用来作为掩码进行与运算的用法
- Android开发高手课笔记--如何打造高质量应用?
- Java 8 - 02 Lambda Expression
- The constructor BASE64Decoder() is not accessible due to restriction on required library
- STM32手册中的CAN过滤器16位标识符屏蔽配置错误说明
- lamp怎么使用mysql_lamp(四)mysql操作
- 华为突遭 Google 釜底抽薪,国产自研操作系统生态恐不可承其重!
- python apk fr_Python fr包_程序模块 - PyPI - Python中文网
- python能做什么程序-学完python可以做什么?
- P1541 乌龟棋 线性dp
- 析构函数定义为虚函数原因
- Excel数据转柱状图
- FreeRTOS学习笔记——FreeRTOS 时间管理
- iis下ISAPI_Rewrite配置及 iis rewrite 规则书写
- 不是买一台电脑就能敲代码!学习java必须了解的计算机知识以及准备工作
- 应用中删除iCloud照片或视频 删除相册照片或视频
- JavaCV音视频开发宝典:基于JavaCV实现wav音频直播服务,wav在线FM电台直播服务,无需流媒体服务,浏览器原生audio标签直接播放wav直播音频
- 小程序“Mustache”语法{{}}(双大括号)获取不到值或图片
- java数组初始化 new_java 数组初始化