html图片轮播加上切换按钮,轮播图（点击按钮切换）

结构部分：

上一张

下一张

样式部分：

*{

margin: 0;

padding: 0;

}

#container{

width: 450px;

margin:50px auto;

padding: 20px;

text-align: center;

background-color: antiquewhite;

}

img{

width: 450px;

height: 200px;

}

.btn button{

background-color: aqua;

color: white;

border: 0;

}

js部分：

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

var btn2=document.getElementsByTagName("button")[1];

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

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

// 创建一个数组用于放图片地址

var imgArr=["./img/img1.jpg","./img/img2.jpg","./img/img3.jpg"];

// 创建一个变量用于存图片索引

var index=0;

p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";

// 点击上一张按钮

btn1.οnclick=function(){

index--;

if(index<0){

index=imgArr.length-1;

}

img.src=imgArr[index];

p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";

}

// 点击下一张按钮

btn2.οnclick=function(){

index++;

if(index>imgArr.length-1){

index=0;

}

img.src=imgArr[index];

p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";

}

效果图(不太好看)：