<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播（一）</title>
<style>
*{margin:0; padding:0;}
.div1{position:relative;height:100%;}
.div1 img{width:100%; position:relative; display:none;}
.div1 a{
font-size:50pt; color:#fff;
position:absolute;
text-decoration:none;
cursor:pointer;
display:inline-block;
width:100px; height:100px;
background:#cccccc;
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
line-height:100px;
text-align:center;
}
.a1{top:50%; left:10%;}
.a2{top:50%; left:90%;}
</style>
</head>
<body>
<div class="div1" id="div1">
<img src="../images/1.jpg" style="display:block" />
<img src="../images/2.jpg" />
<img src="../images/3.jpg" />
<img src="../images/4.jpg" />
<a class="a1" > < </a>
<a class="a2" > > </a>
</div>
<script>
window.onload=function(){
var oDiv1=document.getElementById("div1");
var oimgs=oDiv1.getElementsByTagName("img");
var oA=oDiv1.getElementsByTagName("a");
oA[0].onclick=function(){
var i=fnD(oimgs);
if(i===0){
return;
}
oimgs[i].style.display="none";
oimgs[i-1].style.display="block";
return;
}
oA[1].onclick=function(){
var i=fnD(oimgs);
if(i===3){
return;
}
oimgs[i].style.display="none";
oimgs[i+1].style.display="block";
return;
}
}
//获取当前图片的下标
function fnD(images){
for(var i=0;i<images.length;i++){
if(images[i].style.display==='block'){
return i;
}
}
}
</script>
</body>
</html>

js 图片轮播（一）的更多相关文章

  1. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  2. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  4. js 图片轮播代码编辑

    图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...

  5. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 非常简洁的js图片轮播

    <div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...

  7. js图片轮播图

    /*焦点图*/        var Box='.carousel';//盒子        var Menu=$(Box+' .l_cursor li');//圆点菜单        var Con ...

  8. angular js 图片轮播

    搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...

  9. 最简单的JS图片轮播

    var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...

随机推荐

  1. HTML5 Web Worker的使用

    Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...

  2. jsp_内置对象_request

    request内置对象是使用最多的一个对象,其主要作用是接收客户端发送来的请求信息.如请求的参数.发送的头信息等都属于客户端发送来的信息.request是javax.servlet.http.Http ...

  3. 对偶理论、拉格朗日对偶问题、LP线性规划对偶性质

    Lagrange 对偶问题 定义其的对偶问题: Lagrange函数 考虑线性规划问题 若取集合约束D={x|x≥0},则该线性规划问题的Lagrange函数为 线性规划的对偶问题为: 对偶定理原问题 ...

  4. STM32正交编码器驱动电机

    1.编码器原理        什么是正交?如果两个信号相位相差90度,则这两个信号称为正交.由于两个信号相差90度,因此可以根据两个信号哪个先哪个后来判断方向. 这里使用了TI12模式,例如当T1上升 ...

  5. centos7.2进入单用户模式

    1 - 在启动grub菜单,选择编辑选项启动 2 - 按键盘e键,来进入编辑界面 3 - 找到Linux 16的那一行,将ro改为rw init=/sysroot/bin/sh 4 - 现在按下 Co ...

  6. Django-安装篇

    前提准备:Python,PIP Python直接去官网下载并安装:https://www.python.org/download/,本机安装Python版本:Python 2.7.10 PIP:htt ...

  7. php面向对象学习

    近期跟着别人开发一套php程序,深感自己面向对象很白痴,于是再次巩固了一下面向对象的学习,自己整理了一下这几天面向对象的东西,给大家分享!! 面向对象的三大特性: 封装 -- 隐藏内部实现,稳定外部接 ...

  8. Android editview 设置只能输入数字、字母和汉字

    Android editview 设置只能输入数字.字母和汉字 当处理密码.昵称等特殊情况的时候,往往需要对输入内容加以限制.对于单纯的一种输入法限制可以对键盘和editview熟悉进行控制,而对于多 ...

  9. 0003--Weekly Meeting on 10th April and 17th April, 2015

    10th April, 2015 (1) Orthogonal Matching Pursuit, Least Angle Regression, Dictionary Coherence. -> ...

  10. HTTP笔记整理（2）

    四.  http协议之请求 1.http请求由三部分组成,分别是:请求行(request line).请求报头(request header).请求正文(body) (1).  请求行:用来说明请求类 ...