初学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. TrueType, OpenType, PCL和PostScript字体版本nterleaved 2 of 5 Barcode Font Advantage Package

    Interleaved 2 of 5 Barcode Font Advantage Package包含了TrueType, OpenType, PCL和PostScript字体版本. 提供了超过30个 ...

  2. web安全测试-AppScan

    安全测试应该是测试中非常重要的一部分,但他常常最容易被忽视掉. 尽管国内经常出现各种安全事件,但没有真正的引起人们的注意.不管是开发还是测试都不太关注产品的安全.当然,这也不能怪我们苦B的“民工兄弟” ...

  3. windows命令行及批处理文件小结

    1.命令Shell概述(Command shell overview): The command shell is a separate software program that provides ...

  4. navtab方法参数以及事件

    参数(options) DOM方式初始化navtab的,推荐使用集合属性data-options定义参数,如果使用data属性定义参数,注意转换成对应的名称. 名称 类型 默认值 描述 id stri ...

  5. SharePoint 2013 Nintex Workflow 工作流帮助（二）

    博客地址 http://blog.csdn.net/foxdave 工作流动作 1. Action Set(Logic and flow分组) 它是一个工作流的集合,可以理解为容器的东西.所以它本身并 ...

  6. Setup Factory 打包.netframework 2.0

    在setup factory 的安装目录下的Dependencies中新建目录dotnet20/并放入dotnetfx2.0.exe: Dependencies目录中再加xml文件dotnet20.x ...

  7. c++的调试与运行

    编译F9:运行F10:编译运行F11. 设置断点:在代码所在行的行首单击,该行即被加亮.注意:设置断点后,此时程序运行进入调试状态,要想运行程序,就不能使用F10或者F11,而是要使用F5调试,然后使 ...

  8. (转)MyEclipse设置注释格式

    原文:http://xinghaifeng2006.iteye.com/blog/1243565 MyEclipse设置注释格式(转载)          博客分类: Java基础知识   Windo ...

  9. SwipeRefreshLayout

    也许之前下拉刷新你可能会用到一些第三方开源库,如PullToRefresh, ActionBar-PullToRefresh.XlistView等 但现在已经有官方的组件了---SwipeRefres ...

  10. C++数据结构之List--线性实现

    List(表)类似于队列,不同于队列的是,list可以随机读取/修改/插入某一position,通过position这一位置信息就可以直接修改相应位置的元素.实现方式和队列的类似,多了个positio ...