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

思路：

一、布局

二、制作图片区和按钮区的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. ADO.Net 增、删、改、查（综合练习）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. 浅谈Android Fragment嵌套使用存在的一些BUG以及解决方法

    时间 2014-03-18 18:00:55 eoe博客 原文  http://my.eoe.cn/916054/archive/24053.html 主题 安卓开发 自从Android3.0引入了F ...

  3. gnuplot 的安装

    需要同时安装gnuplot和gnuplot-x11才能画出图 sudo apt-get install gnuplot gnuplot-x11 gnuplot not showing the grap ...

  4. jQuery实例

    1.$("ul li").fliter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClas ...

  5. parentNode的兼容性问题

    IE9下获取对象层次中的父对象,9以上获取文档层次中的父对象 <table><tr><p><td id="haha">haha< ...

  6. 修复ext4日志（jbd2）bug( Ext4 文件系统有以下 Bug)

    from:http://blog.donghao.org/2013/03/20/%E4%BF%AE%E5%A4%8Dext4%E6%97%A5%E5%BF%97%EF%BC%88jbd2%EF%BC% ...

  7. c#中序列化

    序列化(Serialization)是.NET平台的特性之一.1.为什么要序列化:首先你应该明白系列化的目的就不难理解他了.系列化的目的就是能在网络上传输对象,否则就无法实现面向对象的分布式计算.比如 ...

  8. ES6 .Set数据结构去除重复元素

    用法一 var set = new Set([1, 2, 3, 4, 2, 8, 4]); //两个2 for (var elem of set) { console.log(elem) // 输出结 ...

  9. 一步一步学swift之：自己写Api接口-PHP

    想要自己一个人完成app,那么后台接口也必须自己动动手.不用担心,其实很简单的,给自己信心!下面就以登录注册为例,做一个api接口 首先在mac上搭建PHP环境,下载 MAMP Pro for Mac ...

  10. html代码中显示系统时间

    可以显示系统的静态时间和动态时间 1,静态时间 <script type="text/javascript"> var myDate = new Date(); doc ...