js 图片轮播（一）详解编程语言

!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 > img src= ../images/1.jpg > img src= ../images/2.jpg /
img src= ../images/3.jpg /
img src= ../images/4.jpg /
a > a > /div
script
window.onload=function(){
var oDiv1=document.getElementById( div1 );
var oimgs=oDiv1.getElementsByTagName( img );
var oA=oDiv1.getElementsByTagName( a );
oA[0]. unction(){
var i=fnD(oimgs);
if(i===0){
return;
}
oimgs[i].style.display= none
oimgs[i-1].style.display= block
return;
}
oA[1]. unction(){
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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/16303.html