<!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>
相关文章
- 07-25js实现点击图片 弹出放大效果
- 07-25js实现图片点击弹出放大效果
- 07-25ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)
- 07-25【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图
- 07-25JS代码简单一段即可破解QQ空间删除说说
- 07-2550行代码手写原生js轮播图
- 07-25js下拉框选择图片
- 07-25IOS 开发 寻找图片的一些方法和用法
- 07-25蜗牛爱课- CGAffineTransformMakeRotation 实现一张图片的自动旋转
- 07-2507 ArcGIS JS API 4.14实现地图加载图片