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. Django项目国际化

    Django项目国际化 实验环境: py3.4.3 + django1.8.2 + Windows 项目设置 >django-admin startproject I18nDjango > ...

  2. 李洪强iOS开发之iOS技术博客

    李洪强iOS开发之iOS技术博客 注意:访问博客请直接点击博客,不要点击后面的RSS地址 博客地址 RSS地址 南峰子的技术博客   剑尖博客   图拉鼎   Henry Lee   Dev Talk ...

  3. docker jupyter

    151  curl -sSL https://get.docker.com/|sh 152  sudo usermode -aG docker ubuntu 153  sudo usermod -aG ...

  4. IE首页被篡改(手动修复)

    所谓手动修复,即以不变应万变,修改注册表,其实工具软件也只是帮你代工而已. win + R 打开 “运行”,键入 “regedit.exe” 打开注册表编辑器,在 路径 HKEY_LOCAL_MACH ...

  5. 线上定位GC内存泄露问题

    原因:Java中存在内存泄露,就是因为对象无用却可达. 举个例子: 在这个例子中,我们循环申请Object对象,并将所申请的对象放入一个Vector中,如果我们仅仅释放引用本身,那么Vector仍然引 ...

  6. linux学习笔记18---目录结构

    对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统至关重要,下面 ...

  7. Caffe在以下环境安装:Win10+CUDA8.0+Cudnn5.0+VS2013+Matlab2016a(转载)

    Caffe在以下环境安装:Win10+CUDA8.0+Cudnn5.0+VS2013+Matlab2016a 最近于导师要求下,从头学习Caffe.之前接触了CNN进行了图片分类,后导师提起过Caff ...

  8. Ubuntu Apache配置及开启mod_rewrite模块

    刚刚将服务器系统从CentOS换成Ubuntu,将MySQL,Apache,PHP和Wordpress安装好后,发现打开主页是正常的,但是打开文章页面时出现错误.因为使用了自定义的固定链接设置,那自然 ...

  9. ios-A+B经典问题

    // // main.m // a+b // #import <Foundation/Foundation.h> #import "Calcultor.h" int m ...

  10. impala+kudu

    [impala建表]kudu的表必须有主键,作为分区的字段需排在其他字段前面. [range分区](不推荐)CREATE TABLE KUDU_WATER_HISTORY ( id STRING, y ...