初学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. java使用JDBC连接数据库

    1.下载connectors/j: 地址:http://www.mysql.com/downloads/connector/j/ 选择 到此页面点击“No,thanks……" 若使用Java ...

  2. 蓝桥杯 algo——6 安慰奶牛 (最小生成树)

    问题描述 Farmer John变得非常懒,他不想再继续维护供奶牛之间供通行的道路.道路被用来连接N个牧场,牧场被连续地编号为1到N.每一个牧场都是一个奶牛的家.FJ计 划除去P条道路中尽可能多的道路 ...

  3. webview上传图片

    import java.io.File; import android.annotation.SuppressLint;import android.app.Activity;import andro ...

  4. SharePoint 2013 开发——APP安全模型

    博客地址:http://blog.csdn.net/FoxDave 除非开启了SharePoint网站的匿名访问,否则对于入站的请求,必须要有一个身份验证的过程(Authentication),这个 ...

  5. windows azure中国 里面建立一个虚拟机，与虚拟机建立通信 里面部署IIS，外网访问

    在windows azure中国 里面建立一个虚拟机,里面部署IIS,外网不能访问么? 外网访问的地址是给的那个DNS地址 ,比如我的是 DNS 名称 urbanairserver.cloudapp. ...

  6. JS 代理模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. centos7的网络配置以及设置主机名和绑定IP的问题

    CentOS 7.0系统是一个很新的版本哦,很多朋友都不知道CentOS 7.0系统是怎么去安装配置的哦,因为centos7.0与以前版本是有很大的改进哦. 说明:截止目前CentOS 7.x最新版本 ...

  8. Android Studio开发环境变量配置

    1,Android Studio官网可以下载 可以选择下载带有SDK版本 2,如果没有配置SDK,AVD虚拟机是没法使用的,真机调试也用不了. 有时会提醒adb is not connected. 和 ...

  9. C#移动无标题栏窗体的四种代码

    第一种采用,需注意窗体上的控件是否把窗体覆盖了...MouseDown.MouseMove.MouseUp事件应该是鼠标所处位置最顶层的控件的事件在窗体的类中声明两个变量private Point m ...

  10. Bayeux

    Bayeux是一种用来在客户端和服务器端传输低延迟的异步消息(主要通过http)的一种协议.它定义的消息通过命名通道进行路由并且能够进行交互传 送:server -> client, clien ...