自动切换的还不会做。至于两边放一个按钮点击就上一张/下一张的相对简单，我用了两种办法来做这个效果。我的感觉就是学了js以后把简单的事情搞得更复杂了。洒泪~~洒泪~~~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*banner star*/
#banner {
height: 620px;
background: url(banner01.jpg) no-repeat top center;
position: relative;
}
#banner div{
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -74px;
}
#banner input {
height: 15px;
width: 15px;
border-radius: 50%;
border: 1px solid white;
background: rgba(255, 255, 255, 0);
cursor: pointer;
}
</style>
<script>
window.onload=function(){
//****************************************************************
//****************************************************************
/*
* 这是第一种方法。也是以前玩脚本的时候常用的手法。那时候还没开始学js连语法都是网上查的
* 只是看到有人做这个。我就根据他的做法。跟我自己的想法结合了一下
*
*///****************************************************************
//****************************************************************
//****************************************************************
var n=1;
var newBtn;
var newbtn1;
click(); //默认显示第一张，所以n=1，并且调用一次函数；
function click(){
var banner=document.getElementById(‘banner‘);
for (var i=1;i<=4;i++ ){
newBtn=(‘btn‘+i);//获取id的值
newbtn1=document.getElementById(newBtn);
newbtn1.style.background=‘rgba(255,255,255,0)‘;//全部透明度改为全透明
if (i==n){
newbtn1.style.background=‘rgba(255,255,255,1)‘;
banner.style.background=‘url(banner0‘+i+‘.jpg) no-repeat top center‘;
};
};
};
btn1.onclick=function(){
n=1;
click();
}
btn2.onclick=function(){
n=2;
click();
}
btn3.onclick=function(){
n=3;
click();
}
btn4.onclick=function(){
n=4;
click();
}
//****************************************************************
//****************************************************************
/*
* 这是第二种方法。刚学到了函数。今天没事干就回来改了一下
*
*///****************************************************************
//****************************************************************
//****************************************************************
var input=document.getElementsByTagName(‘input‘);
var banner1=document.getElementById(‘banner‘);
//默认选中1
input[0].style.background=‘red‘;
for(var i=0;i<input.length;i++){
input[i].onclick=function(){ //给每个input添加点击事件
this.style.background=‘red‘; //此时的this指的是点击的对象。点击谁this就是谁
/*
* 上面的效果是点击了谁谁的背景颜色就会变为红色
* 下面要把上一个点击对象的背景色设为空
*
* 难点：
* 1.怎么找到上一个点击的对象
* 因为上一个对象是随机的。所以我们把this以外的都改一遍
* 2.怎么找到相应的对应的背景图片名字呢
*
*/
for(var j=0;j<input.length;j++){
if(input[j]!=input[this.id]){ //把未点击的btn背景改为空。那么不走这里的j就是点击的btn对应的下标值：j
input[j].style.background=‘‘;
}else{
//改变相应的banner图片
banner1.style.background=‘url(banner0‘+(j+1)+‘.jpg) no-repeat top center‘;
};
};
};
};
};
</script>
<title>Document</title>
</head>
<body>
<!--banner-->
<div id="banner">
<div>
<input type="button" id="btn1" />
<input type="button" id="btn2" />
<input type="button" id="btn3" />
<input type="button" id="btn4" />
</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/-news-Wjh/p/10156974.html