js仿京东轮播效果 选项卡套选项卡使用


Posted in Javascript onJanuary 12, 2017

本文实例为大家分享了js仿京东轮播效果的具体代码,实现选项卡套用选项卡,供大家参考,具体内容如下

效果图:

js仿京东轮播效果 选项卡套选项卡使用

代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}img{border:0;}
#tab{width:1000px;height:500px;margin:50px auto;}
#tab .title {width:200px;height:500px;display:inline-block;}
#tab .title li {width:200px;height:125px;float:left;line-height:125px;text-align:center;font-size:30px;background:#f1f1f1;border-bottom:1px dotted #000;}
#tab .title li.active {background:#fff;}
#tab .title li:hover{background:#fff;}
#tab .content {width:799px;height:500px;float:right;display:inline-block;position:relative;border:none;border:none;}
#tab .content img{position:absolute;top:0;left:0;width:799px;height:500px;}
#tab .content ul {position:absolute;width:799px;height:45px;bottom:0;left:0;filter(alpha:80);opacity:0.8;background:#000;}
#tab .content ul li {float:left;height:45px;line-height:45px;background:#d5d5d5;border-right:1px solid #fff;cursor:pointer;text-align:center;}
#tab .content ul li.active {background:red;}
#tab .content ul li:hover{background:red;}
</style>
<script>
window.onload = function () {
 var tab = document.getElementById('tab');
 var title = tab.getElementsByClassName('title')[0];
 var titleLi = title.getElementsByTagName('li');
 var main = tab.getElementsByClassName('main')[0];
 var img = main.getElementsByTagName('img')[0];
 var ul = main.getElementsByTagName('ul')[0];
 var subtitleLi = ul.getElementsByTagName('li');
 var arr = [
  {
   title : '最热团购',
   subtitle : ['最热团购1','最热团购2','最热团购3'],
   pic : [
    'img/tab/1-1.png',
    'img/tab/1-2.png',
    'img/tab/1-3.png'
   ]
  },
  {
   title : '商城特惠',
   subtitle : ['商城特惠1','商城特惠2','商城特惠3','商城特惠4'],
   pic : [
    'img/tab/2-1.png',
    'img/tab/2-2.png',
    'img/tab/2-3.png',
    'img/tab/2-4.png'
   ]
  },
  {
   title : '名品推荐',
   subtitle : ['名品推荐1','名品推荐2','名品推荐3','名品推荐4','名品推荐5'],
   pic : [
    'img/tab/3-1.png',
    'img/tab/3-2.png',
    'img/tab/3-3.png',
    'img/tab/3-4.png',
    'img/tab/3-5.png'
   ]
  },
  {
   title : '缤纷活动',
   subtitle : ['缤纷活动1','缤纷活动2','缤纷活动3','缤纷活动4'],
   pic : [
    'img/tab/4-1.png',
    'img/tab/4-2.png',
    'img/tab/4-3.png',
    'img/tab/4-3.png',
   ]
  }
 ];

 // 初始化
 for ( var i = 0; i < arr.length; i++ ) {
  // 大选项卡的标题
  var oLi = document.createElement('li');
  oLi.innerHTML = arr[i].title;
  oLi.index = i;
  oLi.onclick = function () {
   highlight(this);
   ul.innerHTML = '';
   changeTab(this.index);
  }
  title.appendChild(oLi);
 }
 changeTab(0);
 function changeTab(num) { 
  // 大选项卡的内容
  img.src = arr[num].pic[1];
  // 小标题
  for ( var j = 0; j < arr[num].subtitle.length; j++ ) {
   oLi = document.createElement('li');
   oLi.innerHTML = arr[num].subtitle[j];
   oLi.style.width = Math.floor(parseInt(800 / arr[num].subtitle.length) - 2) + 'px';
   oLi.index = j;
   oLi.onclick = function () {
    highlight(this);
    this.parentNode.previousElementSibling.src = arr[num].pic[this.index];
   }
   ul.appendChild(oLi);
  }
 }
 function highlight (ele) {
  var aLi = ele.parentNode.children;
  for ( var i = 0; i < aLi.length; i++ ){
     aLi[i].className = '';
  }
  ele.className = 'active';
 }
}
</script>
</head>
<body>
<div id="tab">
 <ul class="title">
 </ul>
 <div class="content">
  <div class="main">
   <img>
   <ul>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
完善的jquery处理机制
Feb 21 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 #Javascript
JS百度地图搜索悬浮窗功能
Jan 12 #Javascript
原生js实现焦点轮播图效果
Jan 12 #Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 #Javascript
vuejs父子组件通信的问题
Jan 11 #Javascript
bootstrap 表单验证使用方法
Jan 11 #Javascript
原生js实现无缝轮播图效果
Jan 11 #Javascript
You might like
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
javascript事件模型介绍
2016/05/31 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
为Python的web框架编写前端模版的教程
2015/04/30 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
python交互式图形编程实例(一)
2017/11/17 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python 美化输出信息的实例
2018/10/15 Python
Python线程指南分享
2019/11/19 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
本科毕业生自荐信
2014/06/02 职场文书
计算机网络专业求职信
2014/06/05 职场文书
2014年审计工作总结
2014/11/17 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
postgresql中如何执行sql文件
2023/05/08 PostgreSQL