JS原生选项卡 – 幻灯片效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS实现幻动片选项卡</title>
</head>
<style>
.container{
text-align:center;
width:100%;
} .ppt{
display:none;
padding:20px;
margin:0px;
color:white;
text-align:center;
height:200px;
}
.btn{/* 这部分可以改成小圆点、数字*/
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%; }
.btn:hover {
background-color: #777;
} </style>
<body>
<div class="container"> <div id="test1" class="ppt" style="background:red">
<h1>
幻动片1内容（这里可以先出任何你想要的代码）
</h1>
</div>
<div id="test2" class="ppt" style="background:black">
<h1>
幻动片2内容（这里可以先出任何你想要的代码）
</h1>
</div>
<div id="test3" class="ppt" style="background:yellow">
<h1>
幻动片3内容（这里可以先出任何你想要的代码）
</h1>
</div>
<div id="test4" class="ppt" style="background:green">
<h1>
幻动片4内容（这里可以先出任何你想要的代码）
</h1>
</div>
<!--切换按钮-->
<button type="button" class="btn" id="defaultppt" onclick="openppt('test1',this,'red')">幻动片1</button>
<button type="button" class="btn" onclick="openppt('test2',this,'black')">幻动片2</button>
<button type="button" class="btn" onclick="openppt('test3',this,'yellow')">幻动片3</button>
<button type="button" class="btn"onclick="openppt('test4',this,'green')">幻动片4</button>
</div>
<script>
function openppt(pptname,elmnt,color) {
var i, ppt, btn;
//获得PPT并全隐藏
ppt = document.getElementsByClassName("ppt");
for(var i=0;i<ppt.length;i++){
ppt[i].style.display="none";
}
//获取切换按钮并且赋值颜色与PPT一样
btn=document.getElementsByClassName("btn");
for(var j=0;j<btn.length;j++){
btn[j].style.background="";
}
document.getElementById(pptname).style.display = "block";
elmnt.style.backgroundColor = color; }
// 触发 id="defaultppt" click 事件,第一张要显示出来
document.getElementById("defaultppt").click();
</script>
</body>
</html>
JS原生选项卡 – 幻灯片效果的更多相关文章
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- js原生选项卡（包含无缝滚动轮播图）一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
- 用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...
- JS实现选项卡切换效果
1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...
- js原生选项卡（包含移动端无缝选项卡）三
今天分享下移动端原生js的无缝轮播图: 移动端尽量减少使用DOM操作来频繁的浪费移动端设备的性能,所以这个无缝轮播图更多的使用了transition和transform,无缝的思想和昨天分享的PC端的 ...
- js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
- js实现图片幻灯片效果
其效果是点击图片切换到下一张图片 首先准备五张图片 <ul class="imge"> <li><img src="images/1.jpg ...
- JS原生回到顶部效果
// 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...
随机推荐
- 请求由tomcat转到servlet的临界点
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛 (B,F,L,M)
B. Train Seats Reservation You are given a list of train stations, say from the station 1 to the sta ...
- Vue 项目搭建 与 git 连接
整理一下::::: git 方面: -----------注册------登录--------就不用写了 这里使用的是码云: 1. 进入个人中心添加项目. 2.添加完项目添加SSH公钥.(在设置里面) ...
- 学习《Python金融实战》中文版PDF+英文版PDF+源代码
学习python处理金融数据,建议学习<Python金融实战>,比较实用,只不过Yahoo财经的API改了,书里的方法不再有效要改一改,还有就是会有一些代码缩进小问题,总体上对金融分析很实 ...
- 【搭建Saltstack运维工具】
目录 所谓Salt 开始搭建 配置接受密钥 salt命令 YAML详解 目标定位字符串 state模块定义主机状态 Salt采集静态信息之GrainsSalt @(Saltstack) *** 所谓S ...
- Asp.Net Core 之 appsettings.json
原文:Asp.Net Core 之 appsettings.json appsettings.json是什么? 相信大家在.Net Framework的项目都会用的web.config,app.con ...
- CSUOJ 1532 JuQueen
Problem H JuQueen JuQueen is the super computer with the best performance allover Germany. It is on ...
- 利用"SQL"语句自动生成序号的两种方式
1.首先,我们来介绍第一种方式: ◆查询的SQL语句如下: select row_number() over (order by name) as rowid, sysobjects.[name] f ...
- Netty In Action中文版 - 第七章：编解码器Codec
http://blog.csdn.net/abc_key/article/details/38041143 本章介绍 Codec,编解码器 Decoder,解码器 Encoder,编码器 Netty提 ...
- 【v2.x OGE教程 12】 关卡编辑器帮助文档
] 关卡编辑器帮助文档 一.简单介绍 关卡编辑器用于游戏关卡界面元素的可视化编辑,包含元素的位置.尺寸以及其他自己定义属性.通过解析生成的数据文件就可以获取关卡信息,并能随时调整.以降低开发工作量,提 ...