educoder头歌Web实训太原理工web课——综合应用案例：拼图页面的制作【全网更新最快】_玛卡巴卡的博客-CSDN博客

第1关：动态焦点图页面的样式设计

任务描述

本关任务：完成动态焦点图页面的样式设计。

第2关：动态焦点图页面的脚本设计

任务描述

本关任务：完成动态焦点图页面的脚本设计。

编程要求

根据提示，在右侧编辑器补充脚本代码。 1.设置索引号为i的objdrop的背景色为"#ff0"i 2.将标签<li>的元素定义为对象objdrop 3.将第一个objdrop对象的背景色设置为"#f00" 4.将当前对象bjdrop对象的背景色设置为"#f00" 5.将divPic对象中的背景图设置为当前索引号对应的图像
6.使用if语句设置满足向右的按键到第四张图时，下一个图的索引号为0 7.设置满足向左的按键到第一张图时，下一个图的索引号为imgs.length-1 最终实现的效果图如下所示

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>动态焦点图页面</title><link type="text/css" rel="stylesheet" href="https://www.educoder.net/api/attachments/2423157" /><script type="text/javascript">     function set(objdrop) {for (i = 0; i < objdrop.length; i++) {/* *********** Begin *********** *///请设置索引号为i的objdrop的背景色为黄色objdrop[i].style.backgroundColor = "#ff0";/* ************* end ************* */}}window.onload = function () {/* *********** Begin *********** *///请将标签为li的元素定义为对象objdropvar objdrop = document.getElementsByTagName("li");/* ************* end ************* */for (i = 0; i < objdrop.length; i++) {/* *********** Begin *********** *///请定义第一个对象objdrop的背景色为红色objdrop[0].style.backgroundColor = "#f00";/* ************* end ************* */objdrop[1].style.backgroundColor = "#ff0";objdrop[2].style.backgroundColor = "#ff0";objdrop[3].style.backgroundColor = "#ff0";objdrop[i].index = i;objdrop[i].onmouseover = function () {set(objdrop);/* *********** Begin *********** *///请将当前对象objdrop的背景色设置为红色this.style.backgroundColor = "#f00";/* ************* end ************* */  var divPic = document.getElementById("div1");var imgs = ["https://www.educoder.net/api/attachments/2423182", "https://www.educoder.net/api/attachments/2423183", "https://www.educoder.net/api/attachments/2423184", "https://www.educoder.net/api/attachments/2423185"];/* *********** Begin *********** *///将divPic对象中的背景图设置为当前索引号对应的图像  divPic.style.backgroundImage = "url(" + imgs[this.index] + ")";/* ************* end ************* */    }}document.getElementById("div1").index = 0;var imgs = ["https://www.educoder.net/api/attachments/2423182", "https://www.educoder.net/api/attachments/2423183", "https://www.educoder.net/api/attachments/2423184", "https://www.educoder.net/api/attachments/2423185"];document.getElementById("div1").style.backgroundImage = "url(" + imgs[0] + ")";var objrightbtn = document.getElementById("rightbtn");objrightbtn.onclick = function () {    var picIndex = document.getElementById("div1").index;/* *********** Begin *********** *///设置满足向右的按键到第四张图时，下一个图的索引号为0if (picIndex ==  imgs.length-1) {picIndex = 0;}/* ************* end ************* */ else {picIndex++;}document.getElementById("div1").index = picIndex;document.getElementById("div1").style.backgroundImage = "url(" + imgs[picIndex] + ")";set(objdrop);objdrop[picIndex].style.backgroundColor = "#f00";}var objleftbtn = document.getElementById("leftbtn");objleftbtn.onclick = function () { var picIndex = document.getElementById("div1").index;/* *********** Begin *********** *///设置满足向左的按键到第一张图时，下一个图的索引号为imgs.length-1if (picIndex == 0) {picIndex =  imgs.length-1;}/* ************* end ************* */ else {picIndex--;}document.getElementById("div1").index = picIndex;document.getElementById("div1").style.backgroundImage = "url(" + imgs[picIndex] + ")";set(objdrop);objdrop[picIndex].style.backgroundColor = "#f00";}}</script>
</head>
<body><div id="div1"><span id="leftbtn">&lt;</span><span id="rightbtn">&gt;</span><ul><li></li><li></li><li></li><li></li>      </ul></div>
</body>
</html>

educoder头歌Web实训 web课——综合应用案例：动态焦点图页面的制作相关推荐

Educoder/头歌JAVA实训——JAVA面向对象：类与对象
第1关:什么是类,如何创建类什么是类类:类是一个模板,它描述一类对象的行为和属性. 对象:对象是类的一个实例,有属性和行为 . 举个例子: 人是一个 "类",小明就是人的 ...
educoder头歌Web实训 web课——综合应用案例：限时秒杀效果的制作
educoder头歌Web实训太原理工web课--综合应用案例:动态焦点图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客第1关:限时秒杀效果图片渲染 [TOC] 图1如下链接为htt ...
头歌HTML实训笔录
头歌实训笔录 HTML前端基础第2关创建 - 标签 HTML前端基础因学校Java 前端等写代码的作业都在头哥平台上操作,就记录一下每一关的代码吧.. ##第1关创建第一个 HTML 标签 / ...
头歌 Java实训答案全ac代码请善用目录功能
Java初体验第一关 public class HelloWorld{ /********* Begin *********/ public static void main(String[] ar ...
头歌Java实训答案——Java初体验
第1关:Java第一课 public class HelloWorld{/********* Begin *********/public static void main(String[] args ...
头歌Python实训答案——函数结构
第1关:函数的参数 - 搭建函数房子的砖编程要求本关的编程任务是补全src/Step1/plus.py文件的代码,实现相应的功能.具体要求如下: 定义并调用一个函数,功能是对输入的列表中的数值元素 ...
educoder头歌实训 web课——JavaScript语言基础：JS循环语句
educoder头歌实训太原理工大学web课程----JavaScript语法基础:JS运算符_玛卡巴卡的博客-CSDN博客第1关:while类型任务描述质数的定义如下:大于1的自然数,且除 ...
想拿头条百度39W年薪算法offer？推荐你学这个机器学习与推荐系统项目实训强化课...
前几天,我向朋友推荐这个课程. 跟他说,学完能拿大厂机器学习.推荐系统算法方向的offer.结果他看完介绍,直接就报名了. 这个课程是BAT P8级别团队Leader全程亲自授课:并精选多个工业级机器 ...
【免费学习半个月】强烈推荐你学习这个《机器学习与推荐系统实训强化课》...
前几天,我给朋友推荐一个课程,跟他说认真学能拿到头条offer,一开始还说我吹牛,看完介绍,结果直接就报名了.就是下面这个 <机器学习与推荐系统实训强化课> 「Machine Learni ...

educoder头歌Web实训 web课——综合应用案例：动态焦点图页面的制作

第1关：动态焦点图页面的样式设计

任务描述

相关知识

第2关：动态焦点图页面的脚本设计

任务描述

相关知识

编程要求

educoder头歌Web实训 web课——综合应用案例：动态焦点图页面的制作相关推荐

最新文章

热门文章