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

思路：

一、布局

二、制作图片区和按钮区的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. ios学习-制作一个浏览图片的Demo

    一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加im ...

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

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

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

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

随机推荐

  1. c/c++中关于String类型的思考

    首先说明:String并不是一种内置类型,因此任何通过String声明出来的实例都不是一个变量,不同于内置类型因此String仅仅能称之为一种特殊的型别,没错String是一个类类型. 一般来说c语言 ...

  2. sql2008 安装提示重启失败

    [转] https://www.cnblogs.com/chenshaogang/p/4313022.html

  3. [SoapUI] DataSource, DataSourceLoop, DataSink

    Script assertion in login:

  4. JS中立即执行函数的理解

    1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: U ...

  5. C# 判断是否是在设计模式下有效的方法

    public static bool IsDesignMode() { bool returnFlag = false; #if DEBUG if (LicenseManager.UsageMode ...

  6. toolbox类

    新建Qt  应用,项目名称为“c”,基类选择“QWidget”,取消“创建界面”复选框的选中状态. 添加该工程的提供主要显示界面的函数所在的文件,在“c”项目名上单击鼠标右键,在弹出的快捷菜单中选择“ ...

  7. mybatis Mapper.xml和Mapper.java

    mybatis Mapper.xml和Mapper.java 通过Mapper.xml和Mapper.java来实现mybatis.环境和入门的一样的.关键:Mapper.xml + Mapper.j ...

  8. 测试驱动开发 VS 行为驱动开发

    测试驱动开发(Test Driven Development,英文缩写TDD)是极限编程的一个重要组成部分,它的基本思想就是在开发功能代码之前,先编写测试代码.也就是说在明确要开发某个功能后,首先思考 ...

  9. hadoop之MapReduce学习

    为什么需要MapReduce 进行分析数据,计算方便和复用性强:而且是文件级别的 进程包括三个 mrappmaster:负责整个程序管理 maptask:负责map阶段的整个过程 reducemask ...

  10. Mac上修改MySQL默认字符集为utf8

    1.检查默认安装的mysql的字符集 mysql> show variables like '%char%'; +--------------------------+------------- ...