HTML-利用CSS和JavaScript制作一个切换图片的网页

由于个人原因，不详细写步骤

思路：

一、布局

二、制作图片区和按钮区的div及颜色、边框、背景属性等

三、用PS将四张图片剪切到同一个尺寸，重叠放置在图片切换区，透明度设置为0

四、点击对应按钮时，将对应的图片透明度设置为1，并将其他图片透明度设置为0

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
.div1
{position:relative; width:800px; height:600px; margin:50px auto;}
.div1-
{position:absolute; width:800px; height:600px; margin:0px auto;}
.div2
{position:relative; width:800px; height:60px; margin:10px auto;}
.div3
{position:relative; float:left; width:100px; height:50px; border-radius:10px; margin-left:80px; text-align:center; line-height:50px; font-weight:bold; color:#FFF; transition:.5s; cursor:pointer; opacity:0.5;}
.div3:hover
{opacity:; }
.tp
{opacity:; border:5px solid;}
.div4
{position:relative; float:left; width:100px; height:50px; border-radius:10px; margin-left:80px; text-align:center; font-weight:bold; color:#FFF; transition:.5s; cursor:pointer; background-color:#FFF; opacity:;}

</style>
</head>

<body>
<div class="div1">
    <div class="div1-1"><img src="999.jpg" id="" /></div>
    <div class="div1-1"><img src="1-1.jpg" id="" class="tp" /></div>
    <div class="div1-1"><img src="2-2.jpg" id="" class="tp" /></div>
    <div class="div1-1"><img src="3-3.jpg" id="" class="tp" /></div>
    <div class="div1-1"><img src="4-4.jpg" id="" class="tp" /></div>
</div>
<div class="div2">
    <div class="div3" style="background-color:#F00;" onclick="dj1()">图片1</div>
    <div class="div3" style="background-color:#F90;" onclick="dj2()">图片2</div>
    <div class="div3" style="background-color:#00F;" onclick="dj3()">图片3</div>
    <div class="div3" style="background-color:#0F0;" onclick="dj4()">图片4</div>
</div>
<div class="div2">
    <div class="div4" id="" onclick="dj1()"><font color="#F00">▲</font></div>
    <div class="div4" id="" onclick="dj2()"><font color="#F90">▲</font></div>
    <div class="div4" id="" onclick="dj3()"><font color="#00F">▲</font></div>
    <div class="div4" id="" onclick="dj4()"><font color="#0F0">▲</font></div>
</div>
</body>
</html>
<script>
function dj1()
{
    var s0 = document.getElementById("");
    s0.style.opacity="";
    var s2 = document.getElementById("");
    var s22 = document.getElementById("");
    s2.style.opacity="";
    s22.style.opacity="";
    var s3 = document.getElementById("");
    var s33 = document.getElementById("");
    s3.style.opacity="";
    s33.style.opacity="";
    var s4 = document.getElementById("");
    var s44 = document.getElementById("");
    s4.style.opacity="";
    s44.style.opacity="";
    var s1 = document.getElementById("");
    var s11 = document.getElementById("");
    s1.style.opacity="";
    s1.style.borderColor="#F00";
    s1.style.transition="1s";
    s11.style.opacity="";
    s11.style.transition="0.5s";
}
function dj2()
{
    var s0 = document.getElementById("");
    s0.style.opacity="";
    var s1 = document.getElementById("");
    var s11 = document.getElementById("");
    s1.style.opacity="";
    s11.style.opacity="";
    var s3 = document.getElementById("");
    var s33 = document.getElementById("");
    s3.style.opacity="";
    s33.style.opacity="";
    var s4 = document.getElementById("");
    var s44 = document.getElementById("");
    s4.style.opacity="";
    s44.style.opacity="";
    var s2 = document.getElementById("");
    var s22 = document.getElementById("");
    s2.style.opacity="";
    s2.style.borderColor="#F90";
    s2.style.transition="1s";
    s22.style.opacity="";
    s22.style.transition="0.5s";
}
function dj3()
{
    var s0 = document.getElementById("");
    s0.style.opacity="";
    var s1 = document.getElementById("");
    var s11 = document.getElementById("");
    s1.style.opacity="";
    s11.style.opacity="";
    var s2 = document.getElementById("");
    var s22 = document.getElementById("");
    s2.style.opacity="";
    s22.style.opacity="";
    var s4 = document.getElementById("");
    var s44 = document.getElementById("");
    s44.style.opacity="";
    var s3 = document.getElementById("");
    var s33 = document.getElementById("");
    s3.style.opacity="";
    s3.style.borderColor="#00F";
    s3.style.transition="1s";
    s33.style.opacity="";
    s33.style.transition="0.5s";
}
function dj4()
{
    var s0 = document.getElementById("");
    s0.style.opacity="";
    var s1 = document.getElementById("");
    var s11 = document.getElementById("");
    s1.style.opacity="";
    s11.style.opacity="";
    var s2 = document.getElementById("");
    var s22 = document.getElementById("");
    s2.style.opacity="";
    s22.style.opacity="";
    var s3 = document.getElementById("");
    var s33 = document.getElementById("");
    s3.style.opacity="";
    s33.style.opacity="";
    var s4 = document.getElementById("");
    var s44 = document.getElementById("");
    s4.style.opacity="";
    s4.style.borderColor="#0F0";
    s4.style.transition="1s";
    s44.style.opacity="";
    s44.style.transition="0.5s";
}
</script>