如何用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遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...
随机推荐
- 8.1.2 Cursor 对象
游标Cursor也是sqlite3模块中比较重要的一个类,下面简单介绍下Cursor对象的常用方法. 1 execute(sql[,parameters]) 该方法用于执行一条SQL语句,下面的代码演 ...
- 关于框架搭建-web
最近一直在学习前端相关的东西,在学了一堆基础可以以及动手在某个前端框架上写了一些东西之后,我想尝试着开始自己搭建一个框架.不知道时间需要多久,但会持续更新.小菜鸟的成长记录. ------------ ...
- 解决Eclipse导入项目后Validating验证缓慢的问题
减少不必要的验证即可 步骤:Window-Preferences-左侧的Validation 如图所示,将Build一列的勾全部去掉就好了. 如需手动校验,右键项目名-选择Validate即可.
- 多层gmetad配置
经实验表明: ①多层gmetad与ganglia版本无关,且可以多版本兼容 ②多层gmetad只有最底层gmetad能保存详细指标,非底层gmetad收集到的都只能是summary信息,当然也许我配置 ...
- 当前，我们的DJANGO项目的requirements.txt文件
晒一晒,看用得多不多..:) amqp==1.4.7 anyjson==0.3.3 billiard==3.3.0.21 celery==3.1.19 celery-with-redis==3.0 c ...
- Q - Period II
For each prefix with length P of a given string S,if S[i]=S[i+P] for i in [0..SIZE(S)-p-1], then the ...
- [bzoj1855][Scoi2010]股票交易_动态规划_单调队列
股票交易 bzoj-1855 Scoi-2010 题目大意:说不明白题意系列++...题目链接 注释:略. 想法:这个题还是挺难的. 动态规划没跑了 状态:dp[i][j]表示第i天手里有j个股票的最 ...
- [bzoj3037/2068]创世纪[Poi2004]SZP_树形dp_并查集_基环树
创世纪 SZP bzoj-3037/2068 Poi-2004 题目大意:给你n个物品,每个物品可以且仅可以控制一个物品.问:选取一些物品,使得对于任意的一个被选取的物品来讲,都存在一个没有被选取的物 ...
- DTrace Probes In MySQL 自定义探针
Inserting user-defined DTrace probes into MySQL source code is very useful to help user identify the ...
- ExtJs4.1布局具体解释
Border布局: Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create('Ext.container.Viewport', ...