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> ...
随机推荐
- spring4-1-Spring的简单介绍
Spring4.0 是 Spring 推出的一个重大版本升级,进一步加强了 Sring 作为 Java 领域第一开源平台的地位.Spring4.0 引入了众多 Java 开发者期盼的新特性,如泛型依赖 ...
- Loadrunner11无法在win7 64位上启用ie解决办法
Loadrunner11无法在win7 64位上启用ie解决办法 1.loadrunner11在win7 64位上默认启用的是32位的那个IE浏览器,路径:C:\Program Files (x86) ...
- 转载 MYSQL性能优化的最佳20+条经验
转自:https://coolshell.cn/articles/1846.html 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才 ...
- 954I Yet Another String Matching Problem
传送门 分析 我们先考虑暴力如何计算 对于S的子串SS,如果它有位置i使得SS[i] != T[i]那么我们就将两个字符之间用并查集连边 最后答案很明显就是并查集中所有边的个数 于是我们可以发现对于S ...
- [SoapUI] 设置Excel的第一行为自动过滤
import org.apache.poi.ss.util.* XSSFWorkbook workbook = new XSSFWorkbook() XSSFSheet sheet = workboo ...
- HUST数媒1501班第2周作业成绩公布
说明 本次公布的成绩对应的作业为: 第2周个人作业:WordCount编码和测试 如果同学对作业成绩存在异议,在成绩公布的72小时内(截止日期4月26日0点)可以进行申诉,方式如下: 毕博平台的第二周 ...
- Params应用
有时候我们要想传递可变数量的参数改怎么办??Params给我们提供了一个很好的方法 Parmas: 1.只运用方法的最后一位参数 2.这个参数只能标志任意类型的一位数组 3.添加了params这个参数 ...
- 编写高质量代码改善C#程序的157个建议——建议96:成员应优先考虑公开基类型或接口
建议96:成员应优先考虑公开基类型或接口 类型成员如果优先考虑公开及类型或接口,那么会让类型支持更多的应用场合. FCL中最典型的例子是集合的功能操作.集合根据功能划分有多种类型,比如List< ...
- POJ 3660 Cow Contest(传递闭包)
N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming contest. As we ...
- 查看SSD寿命
查看SSD寿命 起初买mac book pro的时候挺担心SSD使用寿命的,过保了后,还搞了个移动硬盘,尽可能的把编译什么的都移动到移动硬盘上进行,实际上这样做都是没有必要的. 安装软件smartct ...