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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
JS中的三个循环小结
Jun 20 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php 数组使用详解 推荐
2011/06/02 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
详解Python IO口多路复用
2020/06/17 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
德国PC硬件网站:CASEKING
2016/10/20 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
专科应届生求职信
2013/11/24 职场文书
童装店创业计划书
2014/01/09 职场文书
教师申诉制度
2014/01/29 职场文书
财务出纳岗位职责
2014/02/03 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技