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; 800px; height:600px; margin:50px auto;}
.div1-1
{position:absolute; 800px; height:600px; margin:0px auto;}
.div2
{position:relative; 800px; height:60px; margin:10px auto;}
.div3
{position:relative; float:left; 100px; height:50px; border-radius:10px; margin-left:80px; text-align:center; line-height:50px; font-weight:bold; color:#FFF; transition:0.5s; cursor:pointer; opacity:0.5;}
.div3:hover
{opacity:1; }
.tp
{opacity:0; border:5px solid;}
.div4
{position:relative; float:left; 100px; height:50px; border-radius:10px; margin-left:80px; text-align:center; font-weight:bold; color:#FFF; transition:0.5s; cursor:pointer; background-color:#FFF; opacity:0;}

</style>
</head>

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

View Code

相关阅读:
字符串及课堂例子整理
 大道至简：软件工程实践者的思想——第四章感想
 大道至简：软件工程实践者的思想——第一章感想（重写）
大道至简：软件工程实践者的思想——第三章感想
 大道至简：软件工程实践者的思想——第二章感想和课后思考
 简单程序代码及心得体会
 《大道至简 ——软件工程实践者的思想》是懒人造就了方法读后感
 实验报告
 懒人的思考造就了方法
 编程其实很简单
原文地址：https://www.cnblogs.com/qq450867541/p/6014127.html