<!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. Ubuntu16.04下面配置java环境变量

    我在ubuntu 16.04下面配置java环境变量的时候,开始在网上查信息的时候,没太注意ubuntu的版本,结果在.bashrc下面设置,在.profile下面设置,都不成功, 后面才想起来搜索u ...

  2. 无法打开注册表项 unknown 没有足够的权限访问

    secedit /configure /cfg %windir%\inf\defltbase.inf /db defltbase.sdb /verbose 执行完,重新安装即可.

  3. Jquery中的checkbox 及radio的问题

    在web开发中,我们经常会对checkbox和radio进行读写操作,下面我来分享一下我的项目中的相关案例: 一.checkbox <input id="check1" cl ...

  4. Java学习日记之 Java-IO流

    Java中的IO流在处理上分为字节流和字符流.字节流和字符流的区别 : 1.字节流读取的时候,读到一个字节就返回一个字节:  字符流使用了字节流读到一个或多个字节(中文对应的字节数是两个,在UTF-8 ...

  5. vim : 依赖: vim-common (= 2:7.3.429-2ubuntu2.1) 但是

    Ubuntu 12.10 安装vim出错[日期:2013-01-18] 来源:Linux社区 作者:Cubernet [字体:大 中 小] 在Ubuntu 12.10中安装vim时出现了如下提示:正在 ...

  6. C# interface

    我们学习了interface,即接口,其与抽象类有点像,但是他们也有一些区别,比如类不能多重继承但是接口却可以多重继承. 接口只包含方法.委托或事件和属性的签名(接口包含的成员).不能包含字段(因为字 ...

  7. 使用ajax预加载图片

    使用Ajax 上面所给出的方法似乎不够酷,那现在来看一个使用Ajax实现图片预加载的方法.该方法利用DOM,不仅仅预加载图片,还会预加载CSS.JavaScript等相关的东西.使用Ajax,比直接使 ...

  8. Linux下多路径multipath配置

    一.multipath在redhat 6.2中的基本配置: 1. 通过命令:lsmod |grep dm_multipath  检查是否正常安装成功.如果没有输出说明没有安装那么通过yum功能安装一下 ...

  9. 影响Java EE性能的十大问题（转）

    本文作者是一名有10多年经验的高级系统架构师,他的主要专业领域是Java EE.中间件和JVM技术.他在性能优化和提升方面也有很深刻的见解,下面他将和大家分享一下常见的10个影响Java EE性能问题 ...

  10. UNET学习笔记1 - 总览

    UNET为两类人设计: (1)使用Unity开发简单多人在线游戏.这类用户可以从NetworkManager或者the High Level API开始: (2)开发复杂多人在线游戏或者开发网络服务. ...