html怎么实现图片上下一张的变换,用javaScript实现轮播图效果 包括自动变换，按钮控制，上一张下一张切换...

javaScript实现轮播图效果(逆战总结)

1.HTML代码

2.css代码

#wrap{

position: relative;

width:590px;

height: 470px;

}

#wrap img{

position: absolute;

top: 0;

left: 0;

/*display: none;*/

opacity: 0;

}

#wrap .on{

/*display: block;*/

transition: 2s;

opacity: 1;

}

.btn {

position: absolute;

bottom: 20px;

left: 50%;

margin-left: -44px;

}

.btn span{

float: left;

width: 8px;

height: 8px;

border:2px solid rgba(255,255,255,0.4);

border-radius: 5px;

margin-right: 10px;

}

.btn .active{

background: white;

cursor: pointer;

}

.left,.right{

display: block;

width: 37px;

height: 53px;

position: absolute;

top: 50%;

margin-top: -27px;

cursor: pointer;

}

.left{

background: url("images/arrow.png") left top;

}

.right{

background: url("images/arrow.png") left -53px;

right: 0;

}

3.js代码

window.onload = function () {

var oWrap = document.getElementById(‘wrap‘);

var aImg = oWrap.getElementsByTagName(‘img‘);

var aBtn = oWrap.getElementsByTagName(‘span‘);

var oPrev = document.getElementById(‘prev‘);

var oNext = document.getElementById(‘next‘);

var iNow =0;

function tab(){

for (var i =0;i

aBtn[i].className=‘‘;

aImg[i].className=‘‘;

}

aBtn[iNow].className=‘active‘;//设置当前按钮选中样式以及当前图片透明度

aImg[iNow].className=‘on‘;

}

setInterval( function () {//每两秒循环变换下一张图片

iNow++;

if (iNow==aBtn.length)iNow=0;

tab();

},2000);

for (var i =0;i

aBtn[i].index=i;//为按钮添加自定义属性(索引)目的是使图片和按钮相对应

//按钮

aBtn[i].οnmοuseοver= function () {

iNow=this.index; //是按钮所控制显示的图片与左右箭头控制显示的图片相对应

tab();

}

//下一个箭头

oNext.onclick = function () {

iNow++;

if (iNow==aImg.length)iNow=0;

tab();

}

//上一个箭头

oPrev.onclick = function () {

iNow--;

if (iNow==-1)iNow=aImg.length-1;

tab();

}

}

}

原文：https://www.cnblogs.com/jiaiyinyang/p/12355665.html