如何用js代码实现图片切换效果
通过点击按钮,实现图片的隐藏与显现,切换。 实现代码:
<style> .a{
width: 300px;
height: 300px;
border: 1px solid black;
}
.b{
width: 50px;
height: 30px;
float: left;
cursor: pointer;
}
.c{
width: 200px;
height: 200px;
position: relative;
margin-top: 30px;
margin-left: 0px;
}
.c1{
width: 200px;
height: 200px;
position: absolute;
left: 10px;
bottom: 0px; } </style>
</head>
<body>
<div class="a">
<div class="b" onclick="show('a1')">11</div>
<div class="b" onclick="show('a2')">22</div>
<div class="b" onclick="show('a3')">33</div>
<div class="c">
<div id="a1" class="c1" style="background-color: #000000;"></div>
<div id="a2" class="c1" style="background-color: red; " ></div>
<div id="a3" class="c1" style="background-color: yellow; "></div>
</div> </div>
</body>
</html>
<script> function show(de)
{
var d= document.getElementById(de); var c= document.getElementsByClassName("c1");
for(var i=0;i<c.length;i++)
{
c[i].style.display="none"; }
d.style.display="block";
} </script>
如何用js代码实现图片切换效果的更多相关文章
- Lightbox JS v2.0图片切换效果
代码下载
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...
- javascript马赛克遮罩图片切换效果:XMosaic.js(转)
新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...
- jquery带按钮的图片切换效果
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
- jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- 100种不同图片切换效果插件pageSwitch
分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览 源码下载 实现的代码. ht ...
- 精致3D图片切换效果,最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
- Flash 用FLASH遮罩效果做图片切换效果
本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...
随机推荐
- ORM 操作
官方文档 一.操作 基本操作 # 增 models.Tb1.objects.create(c1='xx', c2='oo') # 增加一条数据,可以接受字典类型数据 **kwargs obj = mo ...
- GlobalSign 企业型SSL 证书
GlobalSign 企业型SSL 证书 GlobalSign 企业型 SSL 证书属于OV SSL,进行严格的网站所有权的验证,企业真实身份验证,证书标识企业组织机构名称,增加信任度.提供40位 ...
- PatentTips - Indexes of graphics processing objects in GPU commands
BACKGROUND A graphics processing unit (GPU) is a specialized electronic device that is specifically ...
- 洛谷——P2871 [USACO07DEC]手链Charm Bracelet
https://www.luogu.org/problem/show?pid=2871 题目描述 Bessie has gone to the mall's jewelry store and spi ...
- 使用Visual Studio Code调试Electron主进程
1.打开VS Code,使用文件->打开,打开程序目录 2.切换到调试选项卡 3.打开launch.json配置文件 4.在“附加到进程”节点上增加localhost配置 5.使用命令行启动el ...
- 动态加入的HTML的自己主动渲染
这两天在写一个用EasyUI的前台,遇到动态向Layout加入HTML内容时没有自己主动渲染的问题.查了一下网上的资料后得以解决.详细例如以下: $("#content").htm ...
- ORACLE11G设置IP訪问限制
出于数据安全考虑,对oracle数据库的IP做一些限制,仅仅有固定的IP才干訪问. 改动$JAVA_HOME/NETWORK/ADMIN/sqlnet.ora文件 添加下面内容(红色表示凝视): #开 ...
- 一个效果非常华丽的仿桌面APP,却胜似Launcher
开发Android APP的同学是否对于Launcher实现的绚丽效果而痴迷呢?什么.连Android Launcher是什么都不知道.好吧,拿起侬的手机.在解锁后的首页界面上左右滑动滑动,体验体验, ...
- matlab中s函数编写心得-转自水木
S函数是system Function的简称,用它来写自己的simulink模块.(够简单吧,^_^, 详细的概念介绍大伙看帮助吧)可以用matlab.C.C++.Fortran.Ada等语言来写, ...
- 【POJ 3074】 Sudoku
[题目链接] http://poj.org/problem?id=3074 [算法] 将数独问题转化为精确覆盖问题,用Dancing Links求解 转化方法如下 : 我们知道,在一个数独中 : 1. ...