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

思路：

一、布局

二、制作图片区和按钮区的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>

一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页的更多相关文章

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

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  5. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  6. 用 CSS Grid 布局制作一个响应式柱状图

    最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...

  7. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  8. 用CSS伪类制作一个不断旋转的八卦图？

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

  9. three.js 利用uv和ThreeBSP制作一个快递柜

    最近有three网友,问我要不要学习blender,其实我感觉学习一下也无妨,不过花大量时间精通,尚可不必,术业有专攻给别人留一条路吧,哈哈.那我我们就是用ThreeBSP和uv贴图的知识来制作一个定 ...

随机推荐

  1. 一行代码远离Google浏览器兼容问题的困扰

    跟Html相比,Web Flash开发的最大优势就在于兼容性好,因为FlashPlayer的开发商只有Adobe一家.但自从Google插了一脚进来,改版出自己的FlashPlayer以后,这一优势就 ...

  2. [No000061]"别人"凭什么要帮你？&理解中国人的人际和谐&外人、自己人与另一半

    你出身平凡家庭:你毕业于普通大学:你没有田晓霞这样的妻子或者普京这样的丈夫:在权力.金钱乃至能力积累上,你才刚刚上路.你很年轻,你渴望成功,那么,"别人"凭什么帮你? " ...

  3. Mysql慢查询操作梳理

    Mysql慢查询解释MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过long_query_time值的SQL,则会被记录到慢查询 ...

  4. tomcat 启动参数 Xms, Xmx, XX:MaxNewSize, XX:PermSize, -XX:MaxPermSize, Djava.awt.headless

    在 tomcat/bin/catalina.sh 的 第一行#!/bin/sh 下添加 JAVA_OPTS="-server -Xms512m -Xmx1024m -XX:MaxNewSiz ...

  5. 【MVC】自定义Scaffold Template

    MVC提供了基本的CRUD Scaffold Template模板,创建视图的时候,只要勾选创建一个强类型视图 , 并选择模型类,就可以选择支架模板了,这些模板包括List,Detail,Create ...

  6. usb驱动开发18之设备生命线

    现在已经使用GET_DESCRIPTOR请求取到了包含一个配置里所有相关描述符内容的一堆数据,这些数据是raw的,即原始的,所有数据不管是配置描述符.接口描述符还是端点描述符都挤在一起,所以得想办法将 ...

  7. 64位centos 下编译 hadoop 2.6.0 源码

    64位os下为啥要编译hadoop就不解释了,百度一下就能知道原因,下面是步骤: 前提:编译源码所在的机器,必须能上网,否则建议不要尝试了 一. 下载必要的组件 a) 下载hadoop源码 (当前最新 ...

  8. Google Zxing 二维码生成与解析

    生成二维码的开源项目可谓是琳琅满目,SwetakeQRCode.BarCode4j.Zxing...... 前端有JQuery-qrcode,同样能实现生成二维码. 选择Zxing的原因可能是对 Go ...

  9. opencv4-highgui之视频的输入和输出以及滚动条

    这是<opencv2.4.9tutorial.pdf>的highgui的三个例子.通过简短的介绍来实现不同函数的理解,省去一些不需要说的东西. 一.增加滑动条 这是opencv中为数不多的 ...

  10. K-means算法和矢量量化

    语音信号的数字处理课程作业——矢量量化.这里采用了K-means算法,即假设量化种类是已知的,当然也可以采用LBG算法等,不过K-means比较简单.矢量是二维的,可以在平面上清楚的表示出来. 1. ...