js基础练习--控制多组图片切换
js基础练习题,一个按钮控制两组图片的切换,做这题的时候我忽然想到了将num1、mun2……都存放在一个数组中,根据索引值匹配到对应相应组的图片,这样不管有多少组图片都简单的搞定切换,可惜js基础都没学全,不知道数组的数组的变量怎么用,哎……先把问题放在这里吧,继续啃基础知识!
CSS:
*{margin:;padding:;}
.cont{
margin: 30px auto;
height: 400px;
width: 800px;
padding: 20px;
border:1px solid #ccc;
position: relative;
}
.div1{float: left;}
.div2{float: right;}
.div1,.div2{
height: 400px;
width: 340px;
overflow: hidden;
}
.div1 img,.div2 img{
height: 300px;
width: 338px;
overflow: hidden;
border:1px solid #e4007e;
}
.div1 p,.div2 p{
text-align: center;
height: 38px;
line-height: 38px;
}
HTML:
<input id="btn1" type="button" value="上一组">
<input id="btn2" type="button" value="下一组">
<div class="cont" id="cont">
<div class="div1">
<img src="img/small.jpg">
<p>第一组第一张</p>
<span>1/4</span>
</div>
<div class="div2">
<img src="img/small-04.jpg">
<p>第二组第一张</p>
<span>1/3</span>
</div>
</div>
JS:
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oDiv=document.getElementById('cont');
var aImg=oDiv.getElementsByTagName('img');
var aSpan=oDiv.getElementsByTagName('span');
var aP=oDiv.getElementsByTagName('p');
var num1=0;//存放数字
var num2=0;//存放数字
var arrUrl1=['img/small.jpg','img/small-02.jpg','img/small-03.jpg','img/small-04.jpg'];
var arrUrl2=['img/small-05.jpg','img/small-06.jpg','img/small-07.jpg'];
var oText1=['第一组第一张','第一组第二张','第一组第三张','第一组第四张'];
var oText2=['第二组第一张','第二组第二张','第二组第三张']; function Tab(){
aImg[0].src=arrUrl1[num1];
aImg[1].src=arrUrl2[num2];
aP[0].innerHTML=oText1[num1];
aP[1].innerHTML=oText2[num2];
aSpan[0].innerHTML=num1+1+'/'+arrUrl1.length;
aSpan[1].innerHTML=num2+1+'/'+arrUrl2.length;
}
Tab();
oBtn2.onclick=function(){
num1++;
num2++;
if (num1==arrUrl1.length) {
num1=0;
};
if (num2==arrUrl2.length) {
num2=0;
};
Tab();
}
oBtn1.onclick=function(){
num1--;
num2--;
if (num1==-1) {
num1=arrUrl1.length-1;
};
if (num2==-1) {
num2=arrUrl2.length-1;
};
Tab();
}
js基础练习--控制多组图片切换的更多相关文章
- 原生js实现多组图片切换
这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 初学js之多组图片切换实例
需求是以上效果展示.话不多说,直接代码显示,不涉及代码优化.已实现功能为目的. 先看html部分: <body> <div class="dream" id=&q ...
- jquery多组图片层次切换的焦点图
效果:
- JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...
- 极简的js点击组图切换效果
程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- javascript马赛克遮罩图片切换效果:XMosaic.js(转)
新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...
- js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示
js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...
随机推荐
- Atitit.获取主板与bios序列号获取硬件设备信息 Wmi wmic 的作用
Atitit.获取主板与bios序列号获取硬件设备信息 Wmi wmic 的作用 1 获取硬件核心基础核心基础Wmi1 2 其他资料2 3 Wmic WMI 命令行接口2 4 Atitit.获取主板 ...
- vivado设计三:一步一步生成自己的自定义IP核
开发环境:xp vivado2013.4 基于AXI-Lite的用户自定义IP核设计 这里以用户自定义led_ip为例: 1.建立工程 和设计一过程一样,见vivado设计一http://blog. ...
- HDU 1978 How many ways DP问题
How many ways Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- 某某水表-M1卡数据算法分析
# 某某水表-M1卡数据算法分析 ## 卡片数据-----------------------------扇区数据 | 金额:--- |:---13EC 0000 0000 0000 0000 000 ...
- deepin linux 下C开发环境配置
# deepin linux 下C开发环境配置 ## 前言-----------------------------deepin操作系统商店默认提供了 eclipse for c\c++但是系统没有提 ...
- python学习笔记3----正则表达式
正则表达式(RE)是通过re模块来实现的. 字符匹配: --普通字符: *大多数字母和字符一般都会和自身匹配. --元字符:. ^ $ * + ? {} [] \ | () []: 通常用来指定一个 ...
- CSRF学习笔记之CSRF的攻击与防御以及审计【00x2 】
Medium完整代码: <?php if (isset($_GET['Change'])) { // Checks the http referer header if ( eregi ( &q ...
- root-me web server 20-30 writeup
Remote File Inclusion-远程文件包含 Get the PHP source code. ctrl+u 进行RFI攻击需要同时具备三个条件(被攻击机器): allow_url_fop ...
- 1年3年5年-我对PHP攻城师有看法
今天早上公车上看微信拉勾的一些岗位推送,挑了几个PHP攻城师看看 15K-20K的 百万级网站架构经验 3年以上开发,至少1年互联网用户产品开团队开发经验 不低于百度T4水平 数据库规划和优化,熟悉常 ...
- poj3565 Ants km算法求最小权完美匹配,浮点权值
/** 题目:poj3565 Ants km算法求最小权完美匹配,浮点权值. 链接:http://poj.org/problem?id=3565 题意:给定n个白点的二维坐标,n个黑点的二维坐标. 求 ...