<!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. 小试牛刀--利用豆瓣API爬取豆瓣电影top250

    最近得赶进度爬点东西,对于豆瓣,它为开发者提供了API,目前是v2版本,目前key不对个人开放,但是可以正常通过其提供的API获取数据.豆瓣V2版API权限分3类:公开.高级.商务,我们用开放基本数据 ...

  2. iOS 利用webView加载html代码，在代理中获取html页面的链接时出现的问题

    getDetailWebview.loadHTMLString(webViewData as String, baseURL:NSURL(string: "\(ProBaseWeb)&quo ...

  3. flashftp连接虚拟机centos报错的解决方法

    flashftp连接虚拟机centos报错,一般情况可能是因为端口(22)的权限没有开放 先在centos中检查并开放22端口,执行:iptables -I INPUT -p tcp --dport ...

  4. visual studio 2005 常用按键

    VS2005 实用快捷键,迅速提高代码编写效率! 代码快捷键   Ctrl+J / Ctrl+K,L   列出成员   Ctrl+Shift+空格键 / Ctrl+K,P   参数信息   Ctrl+ ...

  5. [c语言]字符数组、字符串定义

    C语言中字符串通常用字符指针和字符数组来定义: char* pS="abcdef"; char s[]="abcdef"; 这两种方式都会在结尾为字符串隐式补结 ...

  6. [UCSD白板题 ]Small Fibonacci Number

    Problem Introduction The Fibonacci numbers are defined as follows: \(F_0=0\), \(F_1=1\),and \(F_i=F_ ...

  7. Windows Phone 8.1新特性 - 应用商店启动协议

    Windows Phone 8.1 Preview SDK 发布也有几个月了,之前断断续续也写过几篇 Windows Phone 8.1 新特性的文章,今天给大家介绍一下应用商店启动协议相关的知识. ...

  8. Session管理解决方案笔记

    大型网站Session管理解决方案: 1. web服务器之间的session复制.    优点:方案成熟    缺点:复制的性能开销大 2. 减少session使用,使用客户端存储cookie     ...

  9. 简单易懂的Activity四种启动模式

    Activity的四种启动模式 我们在项目开发的过程中,会涉及到应用中各个Activity的跳转,有些Activity是可以复用,不用重复加载,节约内存的使用. 将第二个Activity的启动模式修改 ...

  10. ios的网络数据下载和json解析

    ios的网络数据下载和json解析 简介 在本文中,笔者将要给大家介绍如何使用nsurlconnection 从网上下载数据,以及解析json数据格式,以及如何显示数据和图片的异步下载显示. 涉及的知 ...