初学JS，代码还需多多改进，自学中...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
p { margin:0; }
body { text-align:center; }
#box { width:400px; height:400px; border:10px solid #ccc; margin:50px auto 0; position:relative; }
a { width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; }
a:hover { filter:alpha(opacity:30); opacity:0.3; }
#prev { left:10px; }
#next { right:10px; }
#p1 { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; bottom:0; left:0; }
strong { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:0; left:0; }
#img1 { width:400px; height:400px; }
span { position:absolute; width:400px; height:30px; line-height:30px; text-align:center; top:-50px; left:0; font-family:'微软雅黑'; }
</style>

</head>

<body>
<input type="button" value="循环切换" />
<input type="button" value="顺序切换" />

<div id="box"><span>图片可从最后一张跳转到第一张循环切换</span>
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="p1">图片文字加载中……</p>
<strong id="strong1">图片数量计算中……</strong>
<img id="img1" />
</div>
<script>
var aBtn=document.getElementsByTagName('input');
var oImg=document.getElementById('img1');
var oPrev=document.getElementById('prev');
var oNext=document.getElementById('next');
var oP=document.getElementById('p1');
var oSpan=document.getElementsByTagName('span')[0];
var oP=document.getElementById('p1');
var aImg=['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];
var aText=['图片1','图片2','图片3','图片4'];
var oStrong=document.getElementById('strong1');
var num=0;
var onOff=true;
//初始化
function tab(){
oStrong.innerHTML=num+1+'/'+aImg.length;
oP.innerHTML=aText[num];
oImg.src=aImg[num];
};
tab();

aBtn[0].onclick=function(){
onOff;
oSpan.innerHTML='图片可从最后一张跳转到第一张循环切换';
};
aBtn[1].onclick=function(){
onOff=false;
oSpan.innerHTML='顺序切换';
};

oPrev.onclick=function(){
num--;
if(num==-1){
if(onOff){
num=aImg.length-1;
}else{num=0};
};
tab();
};
oNext.onclick=function(){
num++;
if(num==aImg.length){
if(onOff){
num=0;
}else{num=aImg.length-1};
};
tab();
};
</script>
</body>
</html>

JS初学之-if else图片顺序及循环切换的更多相关文章

  1. JS初学之-选项卡（图片切换类）

    初学选项卡,主要问题卡在了索引值上面,花了较长的时间学习. 索引值其实很好理解,就是为每一个元素用JS的方法添加一个属性,即自定义属性. 在for循环里的函数里用i,会直接弹出这个数组的length, ...

  2. js的并行加载以及顺序执行

    重新温习了下这段内容,发现各个浏览器的兼容性真的是搞大了头,处理起来很是麻烦. 现在现总结下并行加载多个js的方法: 1,对于动态createElement('script')的方式,对所有浏览器都是 ...

  3. wex5 实战 wex5与js的组件关系与执行顺序（父子与先后）

    初学wex5,先理理让人容易混淆的三个概念: 一 基本概念: 1 wex5组件,顾名思义,在编辑窗口右侧的组件集合里的,都是wex5基于开源自创的组件,并封装了一套自已的方法.目的是为了方便.相关方法 ...

  4. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  5. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  6. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  7. Sequence.js - 适合电子商务网站的图片滑块

    Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. ...

  8. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  9. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

随机推荐

  1. php解密java的DES加密

    echo openssl_decrypt( $密文 ,"des-ecb" , $密钥 );

  2. 4通用Makefile编写

    a.c #include<stdio.h> #include "a.h" int main() { printf("hello world\n"); ...

  3. wp8.1 Study9：针对不同的屏幕和手机方向调整UI

    一.预备知识 现在不同屏幕大小WP8.1手机越来越多,那么在设计UI时,这需要我们考虑这个问题.在WP中,比例因子(a scale factor)能很好的解决问题,而且在微软系统的PC/平板/手机都是 ...

  4. Hibernate中的组合映射

    1.实体bean设计 car: public class Car { private int id; private String name; private Wheel wheel; set... ...

  5. Android双击返回按钮退出程序

    //双击退出事件 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KE ...

  6. [vijos P1512] SuperBrother打鼹鼠

    这周好好码树状数组和线段树!!之前没写过二维树状数组,凭借一维的思路居然写了个比较像模像样的东西出来,原来我没那么脑残.唯一要注意的就是getsum四个矩形加减的边界条件,这里看了别人标程才意识到错误 ...

  7. STM32之GPIO端口位带操作

    #ifndef __SYS_H #define __SYS_H #include "stm32f10x.h" //位带操作 //把“位带地址+位序号”转换别名地址宏 #define ...

  8. C# 调用配置文件SQL语句 真2B！

    /********************************************************************************* ** File Name : SQ ...

  9. win10下安装centOS 7 U盘

    前段时间我把朋友帮忙装的ubuntu15.10给玩坏了=.=虽然后来自己在另一台电脑上成功装了ubuntu16.04和win7双系统,但是...这台电脑也要装个别的系统才比较..不空.所以决定装个ce ...

  10. js注册验证

    var user = $("user");var userCheck = $("userCheck");var pwd = $("pwd") ...