初学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. WDCP安装常用组件（memcache、mysqli、PDO_MYSQL、mysql innodb、libmcrypt、php zip）的方法

    为有更好的性能,也为更简洁的系统,一些不是常用或不是基本的功能,都将做为可选的安装组件需要用到的就安装 注意:如果安装时遇到 ./configure: Permission denied提示,很有可能 ...

  2. K2 BPM医疗行业EMS解决方案

    EMS,即Event Management System,K2医疗行业EMS解决方案包括四方面的内容. 详情链接:http://www.k2software.cn/zh-hans/ems-soluti ...

  3. Android 圆形ProgressBar风格设置

    Android系统自带的ProgressBar风格不是很好,如果想自己设置风格的话,一般有几种方法.首先介绍一下第一种方法通过动画实现.在res的anim下创建动画资源loading.xml: < ...

  4. linux 用户、组，修改文件权限

    文件权限 -rwxrw-r‐-1 root root 1213 Feb 2 09:39 abc - 10个字符确定不同用户能对文件干什么 - 第一个字符代表文件(-).目录(d),链接(l) - 其余 ...

  5. 2013年8月份第3周51Aspx源码发布详情

    BaiduMusic Cache源码  2013-8-23 [VS2012]功能介绍:可以读取并保存百度音乐(Win8应用程序商店版本)的缓存.可以检测电脑是否安装了百度音乐,支持缓存音乐的导出功能. ...

  6. 从对SAE的一次授权安全评估浅谈云安全

      EMail: jianxin#80sec.comSite: http://www.80sec.comDate: 2011-12-20From: http://www.80sec.com/ [ 目录 ...

  7. Ubuntu 14.10 下安装中文输入法

    系统默认带的是IBUS,这个不怎么好用,我们需要安装一个新的框架FCITX 1 打开软件中心,输入fcitx,安装flexible input method framework 2 下载需要的输入法, ...

  8. IOS 用keychain（钥匙串）保存用户名和密码

    IOS系统中,获取设备唯一标识的方法有很多: 一.UDID(Unique Device Identifier) UDID的全称是Unique Device Identifier,顾名思义,它就是苹果I ...

  9. php大力力 [013节]mySQL数据库乱码问题我还没解决

    <?php echo"测试<br>"; $sql_connection = mysql_connect("localhost","e ...

  10. win7 64位搭建scrapy

    http://blog.csdn.net/it_yuan/article/details/23856713 win7 64位系统依赖的scrapy文件链接:http://pan.baidu.com/s ...