Production of a Roadcast Map of Personal Small Works
Roadmap is a common special effect on a page.
Complete code for this work: Click to view the full code of this work
First, look at the effect map:
To analyze this round-robin map as a whole:
1. You can think of this round-robin map as a big box.This is represented by a <div>
2. In the picture section, the size of the picture is the same as that of the whole box, that is, the picture area inherits the size of the whole box and uses a <div>to load <img>.
3. Because the effect of this rotation picture is to switch the background color behind different pictures at the same time, because a <div>is needed to represent the background part of a picture.
4. In the button section, use positioning to define the position of buttons, switch different pictures, and the corresponding buttons will also switch to different buttons.
Ideas allow you to lay out the HTML sections:
<!doctype html>
<html lang="zh-Hans-CN">
<head>
<meta charset="utf-8">
<title>Carousel Map</title>
<meta name="Keywords" content="Rotation">
<meta name="Description" content="Rotation">
<link rel="stylesheet" href="css/lunbo.css">
</head>
<body>
<!-- banner start -->
<div id="wrapper" class="wrapper">
<div id="banner" class="banner banner-first">
<div id="banner-box" class="banner-box">
<img src="images/1.webp" width="1130" height="500" alt="Typhoon Sales">
</div>
</div>
<div id="banner" class="banner banner-two">
<div id="banner-box" class="banner-box">
<img src="images/2.jpg" width="1180" height="500" alt="Typhoon Sales">
</div>
</div>
<div id="banner" class="banner banner-three">
<div id="banner-box" class="banner-box">
<img src="images/3.jpg" width="1130" height="500" alt="Typhoon Sales">
</div>
</div>
<div id="banner" class="banner banner-four">
<div id="banner-box" class="banner-box">
<img src="images/4.jpg" width="1180" height="500" alt="Typhoon Sales">
</div>
</div>
<div id="banner" class="banner banner-five">
<div id="banner-box" class="banner-box">
<img src="images/5.webp" width="1130" height="500" alt="Typhoon Sales">
</div>
</div>
<div id="banner" class="banner banner-six">
<div id="banner-box" class="banner-box">
<img src="images/6.webp" width="1130" height="500" alt="Typhoon Sales">
</div>
</div>
<div id="banner-tab" class="banner-tab">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- banner end -->
<script src="script/lunbo.js"></script>
</body>
</html>Knowledge about <img>tags:
Pictures cannot be added in actual plain text, <img>tags simply define a point character for the picture.
Requires writing in HTML
<img src="" width="" height="" alt="">
Why write the width and height attributes of <img>in HTML?
Answer: For website performance: the website opens faster.When loading pictures, the browser needs to load and calculate. If you tell the browser the width and height of the pictures, the browser does not need to calculate the width and height of the pictures, so the browser loads quickly.
"alt" property?
Answer: The alt attribute is used to tell the search engine the information of the picture, which is helpful for the search engine to grab the image with the value of the ALT attribute.
CSS section:
* {
margin: 0;
padding: 0;
}
/* banner start */
#wrapper {
position: relative;
width: 100%;
height: 500px;
background: red;
}
#wrapper .banner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; /* 100% here, it inherits wrapper's height, so it's still 500px */
opacity: 0;
transition: 1s;
}
/* Roadmap Background Color */
#wrapper .banner-first {
background: rgb(223, 175, 109);
}
#wrapper .banner-two {
background: rgb(232, 232, 232);
}
#wrapper .banner-three {
background: rgb(133, 198, 236);
}
#wrapper .banner-four {
background: rgb(232, 232, 232);
}
#wrapper .banner-five {
background: rgb(232, 232, 232);
}
#wrapper .banner-six{
background: rgb(80, 113, 233);
}
#wrapper .banner .banner-box {
width: 1230px;
height: 100%;
margin: 0 auto;
}
/* Button */
#wrapper .banner-tab {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
#wrapper .banner-tab span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 3px;
background: rgba(105, 105, 105, .5);
}
#wrapper .banner-tab span.on {
background: #fff;
}
/* banner end */
In order to use pictures to overlap, the absolute positioning property "display: absolute;" is required for picture elements.Location: is the relationship between a reference and a moving element.
About banner-tab:
Use span to represent buttons. Span is an inline element for which display: inline-block is added; it can have block-level attributes (width, height), and inline elements can have text attributes to define their alignment using text-align ment.
JS section:
var aBanner = document.getElementsByClassName("banner");
var banner_box = document.getElementsByClassName("banner-box");
var aSpan = document.getElementsByClassName("banner-tab")[0].getElementsByTagName("span");
//Initialization Style
aBanner[0].style.opacity = "1";
aSpan[0].className = "on";
//Index used to store the current button click
var num = 0;
var time;
//Click Roadcasting
for (var i = 0; i < aSpan.length; i ++) {
aSpan[i].index = i;
aSpan[i].onclick = function () {
for (var j = 0; j < aSpan.length; j ++) {
num = this.index;
aSpan[j].className = "";
aBanner[j].style.opacity = "0";
}
aSpan[num].className = "on";
aBanner[num].style.opacity = "1";
};
}
//Timed Rotation
time = setInterval(function () {
num++;
num %= aBanner.length;
for (var j = 0; j < aSpan.length; j ++) {
aSpan[j].className = "";
aBanner[j].style.opacity = "0";
}
aSpan[num].className = "on";
aBanner[num].style.opacity = "1";
}, 2000);To switch pictures to fade in and out, you can use the opacity attribute (transparency) in conjunction with the transition attribute, which specifies the time required to switch.
About enterprise specifications:
1. Modular development: The missing part of a page will not affect the other part of the page.Independent.
2. Comments
3. To make the website open faster:
a. Reduce the number of http requests, for example: synthesize multiple small pictures into one picture so that only one request is made to the server (already stored in the cache).(
b. Reduce the size of the code, reduce unnecessary comments and strings (less than 1 decimal omits 0 to write only the numbers after the decimal point and the decimal point, color such as: #ccc CCC written as: #ccc)