html仿京东选项卡切换代码,js仿京东轮播效果 选项卡套选项卡使用
本文实例为大家分享了js仿京东轮播效果的具体代码,实现选项卡套用选项卡,供大家参考,具体内容如下
效果图:
代码:
无标题文档
*{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;}
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';
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html仿京东选项卡切换代码,js仿京东轮播效果 选项卡套选项卡使用相关推荐
- 前端js实现京东轮播图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>京 ...
- html选项卡切换代码,js实现简单的可切换选项卡效果
本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 无标题文档 body,ul,li{marg ...
- html轮播图京东效果,js实现京东轮播图效果
Title body,ul,li{padding:0;margin:0;} li{list-style-type:none;} .wrap{ position:relative; width:480p ...
- 基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
- html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例
本篇文章小编给大家分享一下JavaScript仿京东秒杀倒计时代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 仿京东秒杀倒计时 html代码 秒杀倒计时 : : c ...
- 仿京东轮播的广告展示栏
大家都想自己的页面效果做得很炫,那么当然炫就要靠jQuery啦,我今天向大家介绍的是怎么通过jquery实现,仿京东和淘宝上的动画轮播的效果,好废话不多说,上代码 首先是主页面的代码:包含两个列表,一 ...
- html鼠标平滑滚动效果,JS特效代码 JS动态平滑滚动菜单效果
JS特效代码 JS动态平滑滚动菜单效果 www.css5.net body {cursor:crosshair; background:#111; margin:0; padding:0; posit ...
- JS实现图片轮播效果(自动和手动)
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
- html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果 图片轮播效果: 会自动 向左 || 向右 切换图片 能手动点击按钮切换图片 多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
最新文章
- 浅析Kubernetes StatefulSet
- python优雅写法
- 恢复WORD2010的默认模板2011-05-03
- 计算机网络时延图,计算机网络中网站性能延迟加载图像的示例分析
- android activity 渐变,关于Android的径向渐变高级编程的实现
- Effective Java之避免使用终结方法(七)
- 清空临时表oracle,【Oracle相关】Oracle中如何清空临时表空间
- Vue组件相关的知识
- 纯新手DSP编程--5.29--基于CCS的DSP片级支持库CSL
- 【ArcGIS|空间分析|网络分析】2 创建多模式网络数据集
- [pion]测试你的TURN服务器
- %3c大自然的语言%3e竺可桢题目,大自然的语言竺可桢阅读答案
- android手机 无线充电,无线充电手机有哪些?支持无线充电的手机推荐
- RHEL7设置默认启动图形化界面
- MySQL索引失效场景以及解决方案
- mvc:annotation-driven
- AM调制时域代码matlab,AM调制的FPGA实现
- Wireshark抓包软件查看网线直连设备的IP地址
- 【H5】h5文件之——深度学习训练样本制作
- Oracle的表结构:纵向和横向
热门文章
- 超级简单处理:如何删除以管理员身份运行的文件
- Python 抛出异常
- 动态表情包素材在哪里找?表情包视频怎么配音
- Mac Android开发提升效率的工具、插件、心得集锦(gif动画演示)
- appium python实例_Appium Python 常用元素定位方法测试小米计算器实例
- Material design - 图标(二)
- Twemproxy安装使用
- 转载:3516A/D千兆网络变百兆方法
- 在线直播系统源码功能设计方案
- 怎样升级oppo手机android版本,OPPO R9手机全网通版升级ColorOS 3.0:基于安卓6.0