<!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. JQuery FullCalendar(二)

    前言:根据前文介绍,我们对JQuery FullCalendar如何从后台取数据有了初步了解,已经实现最基本的要求.下面介绍一下FullCalendar的事件 $('#calendar').fullC ...

  2. pushState 和 replaceState

    使用此方法浏览器前进后退仍然可查看对应内容 设置值 history.pushState({}, "页面标题", "xxx.html"); history.rep ...

  3. 学习django之python中os模块的函数

    os.sep可以取代操作系统特定的路径分隔符.windows下为 “\\” os.name字符串指示你正在使用的平台.比如对于Windows,它是'nt',而对于Linux/Unix用户,它是'pos ...

  4. js中的变量小例子

    s中的变量function foo(){ n=99;}alert(n);//undefined,因为没有调用该函数 function foo(){ n=99;}foo();alert(n);//99, ...

  5. Android中<original-package>标签含义

    在AndroidManifest.xml中,<original-package>与<manifest package=...>中的区别:<original-package ...

  6. Java中的一个类怎么调用另一个类中的方法

    如果另一个类中的那个方法是私有的话,就不能直接调用到,如果是其他类型的话看情况,如果是静态的(static)话,直接用类名可以调用到,如果是非静态的,就需要利用另一个类的实例(也就是用那个类生成的对象 ...

  7. webuploader 断点续传

    webuploader 实现 断点续传webuploader是百度开发的上传文件前端控件.可支持html5和flash,因此对浏览器的兼容比较好.因为需要用到ie8,ie8不支持html5,所以必须支 ...

  8. ListView组件应用源码

    首先在xml文件中定义ListView组件 <ListView android:id="@+id/show_view_list" android:layout_width=& ...

  9. highcharts 当Y轴全部没有数据的时候 数据标签显示最下面 而不是居中显示

    yAxis: {min: 0,minRange: 1}

  10. javascript 设计模式-----享元模式

    四个轮子,一个方向盘,有刹车,油门,车窗,这些词首先让人联想到的就是一辆汽车.的确,这些都是是一辆车的最基本特征,或者是属性,我们把词语抽象出来,而听到这些词语的人把他们想象陈一辆汽车.在代码里面也是 ...