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基础练习--控制多组图片切换的更多相关文章

  1. 原生js实现多组图片切换

    这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...

  2. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  3. 初学js之多组图片切换实例

    需求是以上效果展示.话不多说,直接代码显示,不涉及代码优化.已实现功能为目的. 先看html部分: <body> <div class="dream" id=&q ...

  4. jquery多组图片层次切换的焦点图

    效果:

  5. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  6. 极简的js点击组图切换效果

    程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

  7. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  8. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  9. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

随机推荐

  1. android studio - 提取局部变量,全局变量,方法快捷键

    提取局部变量:Ctrl+Alt+V 提取全局变量:Ctrl+Alt+F 提取方法:Shit+Alt+M

  2. C++类成员指针(指向类成员的指针)

    1.指向类的数据成员的指针: 声明格式如下: <类型说明符> <类名>::* <指针变量名>; 2.指向类的成员函数的指针: 声明格式如下:   <类型说明符 ...

  3. make命令用法--转

    转自:http://www.techug.com/make 代码变成可执行文件,叫做编译(compile):先编译这个,还是先编译那个(即编译的安排),叫做构建(build). Make是最常用的构建 ...

  4. Django Model之引用一个未定义的Model

    Django Model的外键自关联

  5. jsp tld 的tag 自定义标签扩展

    引入方式 <%@ taglib prefix="bgt" uri="/WEB-INF/tlds/bgt.tld" %> 写法示例如下: <?x ...

  6. poll?transport=longpoll&connection...连接的作用

    在浏览器中打开使用VS2013开发的项目时,按F12使用浏览器调试,会发现一堆无关的请求,结构大致是:poll?transport=longpoll&connection.....一直不停的请 ...

  7. oracle instant client,tnsping,tnsnames.ora和ORACLE_HOME

    前段时间要远程连接oracle数据库,可是又不想在自己电脑上完整安装oracleclient,于是到oracle官网下载了轻量级clientinstant client. 这玩意没有图形界面,全靠sq ...

  8. Node.js 配置Nginx

    1.修改nginx.conf upstream nodejs { server 127.0.0.1:3000; #server 127.0.0.1:3001; keepalive 64; } serv ...

  9. www--摘录图解TCP/IP

    万维网,www,world wide web,也称web.将互联网中的信息以超文本的形式展现的系统.可以显示www信息的客户端软件叫做web浏览器. www内容 www定义了3个重要的概念,它们分别是 ...

  10. hdu6005 Pandaland 想法+dijkstra

    /** 题目:hdu6005 Pandaland 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6005 题意:给定一个带权无向图,求权值和最小的环的值,如 ...