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

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

思路：

一、布局

二、制作图片区和按钮区的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制作一个切换图片的网页的更多相关文章

一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页
由于个人原因,不详细写步骤思路: 一.布局二.制作图片区和按钮区的div及颜色.边框.背景属性等三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
ios学习-制作一个浏览图片的Demo
一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加im ...
使用JavaScript制作一个好看的轮播图
目录使用JavaScript制作出好看的轮播图效果准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
用CSS伪类制作一个不断旋转的八卦图？
前言介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

随机推荐

29-中国剩余定理CRT
https://blog.csdn.net/u010468553/article/details/38346195 中国剩余定理[数论] 2014年08月02日 12:55:59 阅读数:2351 中 ...
OpenCV学习记录（一）：使用haar分类器进行人脸识别标签： opencv脸部识别c++ 2017-07-03 15:59 26人阅读
OpenCV支持的目标检测的方法是利用样本的Haar特征进行的分类器训练,得到的级联boosted分类器(Cascade Classification).OpenCV2之后的C++接口除了Haar特征 ...
最大公约数（gcd）和最小公倍数（lcm）——辗转相除法
辗转相除法(又称欧几里得算法)是求最大公因数的算法要求a,b的最大公约数(a>b),我们可以递归地求b,a%b的最大公约数,直到其中一个数变成0,这时另一个数就是a,b的最大公约数. C++实 ...
SQL 零碎点
1,插入数据后,返回主键ID值: INSERT INTO tablename (name) VALUES (@name);SELECT @@Identity; 使用 SELECT @@Identity ...
Spring.net 容器注入是替换（后处理器appConfigPropertyHolder）
.定义节点下面两个都定义为键值对 <section name="DaoConfiguration" type="System.Configuration.Name ...
sublime 3插件安装记录
安装sublime 3的package control管理器: 从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console.将以下 Python 代码粘贴进去 ...
Linux-Linux基础入门
第一节 Linux系统简介初步了解了什么是Linux系统,有何优势.与Windows系统有何不同,并了解Linux学习方法. 第二节基本概念及概念 1.完成实验楼入门基础课程,共两个实验:(1)& ...
HTML inline 与block元素
行标签:内容撑开宽度,不可以控制宽和高,它的宽和高随标签里的内容而改变块标签:撑满行(默认) ,可以用样式控制其宽和高但行标签 img,textarea,select,input 是可以设置宽和高 ...
用JAVA实现无等待数据库连接池
我们都知道数据库连接是一种有限和非常昂贵的应用资源,怎样对这些资源进行高效的管理,能有效的改善整个系统的性能和健壮性.数据库连接池正是针对这个问题而提出来的. 数据库连接负责分配.释放和管理数据库连接 ...
ZOJ3705:Applications
Recently, the ACM/ICPC team of Marjar University decided to choose some new members from freshmen to ...

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

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

随机推荐

热门专题