html 轮播图 实例,轮播图案例2.html

Title

*{padding: 0;margin: 0;}

.banner{

width: 500px;

height: 281px;

margin: 300px auto;

position: relative;

}

.banner img{

width: 100%;

height: 100%;

}

.banner span{

width:50px;

height: 100px;

background: white;

opacity: 0.6;

position: absolute;

top: 50%;

margin-top:-50px;

font-size: 35px;

text-align: center;

line-height: 100px;

cursor: pointer;

display: none;

}

.left{

left: 20px;

}

.right{

right: 20px;

}

#banner .mask{

width: 100%;

height: 70px;

background: #fff;

opacity: 0.5;

position: absolute;

bottom: 0;

}

#banner p{

width: 100%;

height: 70px;

position: absolute;

bottom: 0;

line-height: 70px;

font-size: 25px;

text-align: center;

}

.a1{

text-decoration: none;

display: block;

width: 100px;

height: 50px;

background: #008ce1;

color: white;

margin: 50px auto;

text-align: center;

line-height: 50px;

}

第一张图片

<

>

下一遍

var banner=document.getElementById("banner");

var span=document.getElementsByTagName("span");

var img=document.getElementsByTagName("img")[0];

var op=document.getElementsByTagName("p")[0];

var oimg=["img/gaitubao_com_15131628725492.jpg","img/gaitubao_com_15131630894987.jpg","img/gaitubao_com_15131632175706.jpg"];

var otext=["第一张图片","第二张图片","第三张图片"];

function display(value){

for (var i=0;i

span[i].style.display=value;

}

}

banner.οnmοuseοver=function(){

display("block")

};

banner.οnmοuseοut=function(){

display("none")

};

var a=0;

span[0].οnclick=function(){

if (a==0){

a=oimg.length -1;

}else {

a--;

}

img.src=oimg[a];

op.innerHTML=otext[a];

};

span[1].οnclick=function(){

if(a==2){

a=0;

}else {

a++;

}

img.src=oimg[a];

op.innerHTML=otext[a];

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史