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

思路：

一、布局

二、制作图片区和按钮区的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. [AIR] as3 之条件编译多平台妙用

    http://bbs.9ria.com/thread-418864-1-1.html 一直希望as3 可以支持条件编译,即满足A时编译函数1,满足B时则编译函数2. 最佳百度了之后,发现原来是可以实现 ...

  2. uwp项目总结

  3. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  4. 【转】mysql触发器的实战（触发器执行失败，sql会回滚吗）

    1   引言Mysql的触发器和存储过程一样,都是嵌入到mysql的一段程序.触发器是mysql5新增的功能,目前线上凤巢系统.北斗系统以及哥伦布系统使用的数据库均是mysql5.0.45版本,很多程 ...

  5. keytool命令记录

    1.生成服务器端私钥kserver.keystore文件 2.根据私钥,导出服务器端安全证书 3.将服务器端证书,导入到客户端的Trust KeyStore中 4.生成客户端私钥kclient.key ...

  6. QT 常用控件二

    QT提供QHBoxLayout类.QVBoxlayout类及QGridLayout类等的基本布局管理,分别是水平排列布局,垂直排列布局和网格排列布局 addWidget()方法用于向布局中加入需要布局 ...

  7. 为easyui datagrid 添加上下方向键移动

    将以下脚本保存为 easyui-datagrid-moverow.js var DatagridMoveRow = (function($){ function DatagridMoveRow(gri ...

  8. Android -- ViewDragHelper

    ViewDragHelper SlidingPaneLayout和DrawerLayout,现在这俩个类被广泛的运用,其实研究他们的源码你会发现这两个类都运用了ViewDragHelper来处理拖动. ...

  9. Java 生成 UUID

    1.UUID 简介 UUID含义是通用唯一识别码 (Universally Unique Identifier),这是一个软件建构的标准,也是被开源软件基金会 (Open Software Found ...

  10. WebService的两种方式SOAP和REST比较 (转)

    我的读后感:由于第一次接触WebService,对于很多概念不太理解,尤其是看到各个OpenAPI的不同提供方式时,更加疑惑.如google map api采用了AJAX方式,通过javascript ...