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

思路：

一、布局

二、制作图片区和按钮区的div及颜色、边框、背景属性等

三、用PS将四张图片剪切到同一个尺寸，重叠放置在图片切换区，透明度设置为0

四、点击对应按钮时，将对应的图片透明度设置为1，并将其他图片透明度设置为0

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>无标题文档</title>
  4. <style>
  5. *{margin:0px; padding:0px;}
  6. .div1
  7. {position:relative; width:800px; height:600px; margin:50px auto;}
  8. .div1-
  9. {position:absolute; width:800px; height:600px; margin:0px auto;}
  10. .div2
  11. {position:relative; width:800px; height:60px; margin:10px auto;}
  12. .div3
  13. {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;}
  14. .div3:hover
  15. {opacity:; }
  16. .tp
  17. {opacity:; border:5px solid;}
  18. .div4
  19. {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:;}
  20.  
  21. </style>
  22. </head>
  23.  
  24. <body>
  25. <div class="div1">
  26.     <div class="div1-1"><img src="999.jpg" id="" /></div>
  27.     <div class="div1-1"><img src="1-1.jpg" id="" class="tp" /></div>
  28.     <div class="div1-1"><img src="2-2.jpg" id="" class="tp" /></div>
  29.     <div class="div1-1"><img src="3-3.jpg" id="" class="tp" /></div>
  30.     <div class="div1-1"><img src="4-4.jpg" id="" class="tp" /></div>
  31. </div>
  32. <div class="div2">
  33.     <div class="div3" style="background-color:#F00;" onclick="dj1()">图片1</div>
  34.     <div class="div3" style="background-color:#F90;" onclick="dj2()">图片2</div>
  35.     <div class="div3" style="background-color:#00F;" onclick="dj3()">图片3</div>
  36.     <div class="div3" style="background-color:#0F0;" onclick="dj4()">图片4</div>
  37. </div>
  38. <div class="div2">
  39.     <div class="div4" id="" onclick="dj1()"><font color="#F00">▲</font></div>
  40.     <div class="div4" id="" onclick="dj2()"><font color="#F90">▲</font></div>
  41.     <div class="div4" id="" onclick="dj3()"><font color="#00F">▲</font></div>
  42.     <div class="div4" id="" onclick="dj4()"><font color="#0F0">▲</font></div>
  43. </div>
  44. </body>
  45. </html>
  46. <script>
  47. function dj1()
  48. {
  49.     var s0 = document.getElementById("");
  50.     s0.style.opacity="";
  51.     var s2 = document.getElementById("");
  52.     var s22 = document.getElementById("");
  53.     s2.style.opacity="";
  54.     s22.style.opacity="";
  55.     var s3 = document.getElementById("");
  56.     var s33 = document.getElementById("");
  57.     s3.style.opacity="";
  58.     s33.style.opacity="";
  59.     var s4 = document.getElementById("");
  60.     var s44 = document.getElementById("");
  61.     s4.style.opacity="";
  62.     s44.style.opacity="";
  63.     var s1 = document.getElementById("");
  64.     var s11 = document.getElementById("");
  65.     s1.style.opacity="";
  66.     s1.style.borderColor="#F00";
  67.     s1.style.transition="1s";
  68.     s11.style.opacity="";
  69.     s11.style.transition="0.5s";
  70. }
  71. function dj2()
  72. {
  73.     var s0 = document.getElementById("");
  74.     s0.style.opacity="";
  75.     var s1 = document.getElementById("");
  76.     var s11 = document.getElementById("");
  77.     s1.style.opacity="";
  78.     s11.style.opacity="";
  79.     var s3 = document.getElementById("");
  80.     var s33 = document.getElementById("");
  81.     s3.style.opacity="";
  82.     s33.style.opacity="";
  83.     var s4 = document.getElementById("");
  84.     var s44 = document.getElementById("");
  85.     s4.style.opacity="";
  86.     s44.style.opacity="";
  87.     var s2 = document.getElementById("");
  88.     var s22 = document.getElementById("");
  89.     s2.style.opacity="";
  90.     s2.style.borderColor="#F90";
  91.     s2.style.transition="1s";
  92.     s22.style.opacity="";
  93.     s22.style.transition="0.5s";
  94. }
  95. function dj3()
  96. {
  97.     var s0 = document.getElementById("");
  98.     s0.style.opacity="";
  99.     var s1 = document.getElementById("");
  100.     var s11 = document.getElementById("");
  101.     s1.style.opacity="";
  102.     s11.style.opacity="";
  103.     var s2 = document.getElementById("");
  104.     var s22 = document.getElementById("");
  105.     s2.style.opacity="";
  106.     s22.style.opacity="";
  107.     var s4 = document.getElementById("");
  108.     var s44 = document.getElementById("");
  109.     s44.style.opacity="";
  110.     var s3 = document.getElementById("");
  111.     var s33 = document.getElementById("");
  112.     s3.style.opacity="";
  113.     s3.style.borderColor="#00F";
  114.     s3.style.transition="1s";
  115.     s33.style.opacity="";
  116.     s33.style.transition="0.5s";
  117. }
  118. function dj4()
  119. {
  120.     var s0 = document.getElementById("");
  121.     s0.style.opacity="";
  122.     var s1 = document.getElementById("");
  123.     var s11 = document.getElementById("");
  124.     s1.style.opacity="";
  125.     s11.style.opacity="";
  126.     var s2 = document.getElementById("");
  127.     var s22 = document.getElementById("");
  128.     s2.style.opacity="";
  129.     s22.style.opacity="";
  130.     var s3 = document.getElementById("");
  131.     var s33 = document.getElementById("");
  132.     s3.style.opacity="";
  133.     s33.style.opacity="";
  134.     var s4 = document.getElementById("");
  135.     var s44 = document.getElementById("");
  136.     s4.style.opacity="";
  137.     s4.style.borderColor="#0F0";
  138.     s4.style.transition="1s";
  139.     s44.style.opacity="";
  140.     s44.style.transition="0.5s";
  141. }
  142. </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. PHP从数据库导出EXCEL文件

    参考博客链接:http://www.cnblogs.com/huangcong/p/3687665.html 我的程序代码 原生导出Excel文件 <?phpheader('Content-ty ...

  2. 深入理解Linux修改hostname（转载）

    http://www.cnblogs.com/kerrycode/p/3595724.html http://www.centoscn.com/CentOS/config/2014/1031/4039 ...

  3. 见鬼了，swiper

    1.今天不知怎么swiper的onInit函数不起作用,怎么弄都不行: 把以前能行的案例的包都导进去还是不行,但是onSlideChangeEnd可以触发,晕死了.... 不,它触发了一次onInit ...

  4. 关于iOS9,Xcode7以上的安全性问题

    目前伴随着苹果方面对安全性方面的重视,在Xcode开发过程中有时候会出现数据解析在view上不显示的问题 这是在iOS9,Xcode7以后苹果方面为了保护用户安全而采用的用户发送请求机制,那么在开发中 ...

  5. SPM12manual，统计部分（8-10）笔记

    fMRI model specifictaion GLM based 包括以下步骤:①明确GLM设计矩阵:②用经典或贝叶斯方法估计GLM参数:③利用对比向量检查结果,生成统计参数图(SPMs)以及后验 ...

  6. ext 自带搜索功能

  7. 使用gogs,drone搭建自动部署

    使用gogs,drone搭建自动部署 使用gogs,drone,docker搭建自动部署测试环境 Gogs是一个使用go语言开发的自助git服务,支持所有平台Docker是使用go开发的开源容器引擎D ...

  8. QT 数据库编程二

    //logindlg.cpp #include "logindlg.h" #include <QGridLayout> #include <QHBoxLayout ...

  9. FFmpeg中HLS文件解析源码

    不少人都在找FFmpeg中是否有hls(m3u8)解析的源码,其实是有的.就是ffmpeg/libavformat/hlsproto.c,它依赖的文件也在那个目录中. 如果要是单纯想解析HLS的话,建 ...

  10. 基于.NET Socket API 通信的综合应用

    闲谈一下,最近和客户进行对接Scoket 本地的程序作为请求方以及接受方,对接Scoket 的难度实在比较大,因为涉及到响应方返回的报文的不一致性,对于返回的报文的格式我需要做反序列化的难度增大了不少 ...