网站设计基础教程||阶段案列9.4||通过JS实现背景图片切换

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>阶段案例9.4|21305雷文涛|</title><style type="text/css">*{margin: 0; padding: 0;list-style: none;}.div-bj{margin: 0px auto;margin-top: 10%;width: 75%;height: 600px;box-sizing: border-box;}.div-yuan{display: inline-block;width: 80px;height: 80px;border-radius: 40px;/* background-color: orange; */margin: 33px;border: 2px solid white;z-index: 120;position:relative;top: 300px;left: 9%;}.div-yuan:hover{cursor: pointer;transition: 0.3s;width: 70px;height: 70px;margin: 37px;border-radius: 36px;border: 3px solid red;}.div-zi{display: inline-block;width: 120px;height: 92px;border-radius:10px;background-color: darkgreen;font-size: 20px;line-height: 120px;font-weight: bold;text-align: center;color: #FFFFFF;margin: 15px;z-index: 100;position: relative;top: 200px;left: 9%;}.div-zi:hover{cursor: pointer;background-color: whitesmoke;color: red;}</style></head><body id="div3" ><div class="div-bj"><div class="div-yuan"style="background: url(img/duoyun.jpg);"></div><div class="div-yuan"style="background: url(img/qingtian.jpg);"></div><div class="div-yuan"style="background: url(img/shandian.jpg);"></div><div class="div-yuan"style="background: url(img/xiaoxue.jpg);"></div><div class="div-yuan"style="background: url(img/yinyun.jpg);"></div><br /><div class="div-zi" onclick="a()">周一</div><div class="div-zi" onclick="b()">周二</div><div class="div-zi" onclick="c()">周三</div><div class="div-zi" onclick="d()">周四</div><div class="div-zi" onclick="e()">周五</div></div></body><script type="text/javascript">function a(){document.getElementById("div3").style.backgroundImage="url(img/1.jpg)";}function b(){document.getElementById("div3").style.backgroundImage="url(img/2.jpg)";}function c(){document.getElementById("div3").style.backgroundImage="url(img/3.jpg)";}function d(){document.getElementById("div3").style.backgroundImage="url(img/4.jpg)";}function e(){document.getElementById("div3").style.backgroundImage="url(img/5.jpg)";}</script>
</html>

图片自己替换一下就好了啦。

网站设计基础教程||阶段案列9.4||通过JS实现背景图片切换相关推荐

自学《HTML5+CSS 32网站设计基础教程》第一章
第一章初始HTML 5 1.1 HTML5 概述 1.1.1 HTML5发展历程 1.1.2 HTML5的优势 1.1.3 HTML5浏览器支持情况 1.1.4 创建第一个HTML5页面 1.2 H ...
百度页面的html5结构,HTML5+CSS3网站设计基础教程
HTML5与CSS3是下一代Web应用技术的基础,使互联网进入了一个崭新的时代.本书从HTML5和CSS3的基础知识入手,重点讲解HTML5和CSS3新增功能和最新前端技术,通过大量实例对HTML5和 ...
html5界面设计教程,HTML5+CSS3网站设计基础教程
HTML5与CSS3是下一代Web应用技术的基础,使互联网进入了一个崭新的时代.本书从HTML5和CSS3的基础知识入手,重点讲解HTML5和CSS3新增功能和最新前端技术,通过大量实例对HTML5和 ...
20个超棒的CSS3图片切换灯箱效果教程推荐
CSS3中增加了诸多新的特性,借助这些特性,可以实现不可思议的效果.本文带来20个教程,教你如何使用CSS3创建引人注目的图片切换效果和灯箱效果. 点击小标题可以直接看效果 1. 创建带3D灯箱动画 ...
c语言编游戏怎么设置背景图,steam如何设置背景图片 steam个人背景图片设置教程...
看着steam好友的个人背景都设置得很好看,无论是游戏还是动漫二次元的个人背景,都给人一种很深的影响,是不是有点心动了呢?steam如何设置背景图片?下面小编带来了steam个人背景图片设置教程,希望 ...
c++实训案列教程单元一程序设计初步-知识点提问
<c++实训案列教程>单元一程序设计初步知识点提问: 什么是计算机的主机和外设?常见的外设有那些?答:系统外部的设备叫外设,主机是指计算机除去输入输出设备以外的主要机体部分--通常包括C ...
Java基础再回首之设计模式系列①-----StrategyPattern 策略者模式（案列教程，附带demo）
一.前言自己学java学的也熟悉了.踏入工作的不归路之后,身为一个Android开发工程师,不仅要Java基础扎实,还要对其的设计模式有所掌握,最近在群听到<Head First>这本书 ...
iOS10 UI设计基础教程
iOS10 UI设计基础教程介绍:本教程针对iOS初级开发人员,基于iOS 10系统,使用Swift 3.0语言讲解如何进行UI设计.本教程内容涵盖UI基础构成.UI元素.自动布局.自适应UI.UI ...
快速制作响应式的个人主页案列
博哥教你使用纯CSS制作酷炫的个人名片效果 Author:博哥时间:2023-01-11 前言该文档对应的视频教程,请移步B站观看! 去B站播放该教程一.需要掌握的前置知识和用的素材 1.1.前 ...

网站设计基础教程||阶段案列9.4||通过JS实现背景图片切换

网站设计基础教程||阶段案列9.4||通过JS实现背景图片切换相关推荐

最新文章

热门文章