This article mainly introduces how to dynamically switch images in js, including the complete css file and js file implementation skills, which is of great practical value, for more information, see the examples in this article. Share it with you for your reference. The specific implementation method is as follows:
The index.css file is as follows:
The Code is as follows:
*{
Margin: 0px; padding: 0px;
}
Body {
Width: 632px;
/* Background-color: blue ;*/
Margin: 0 auto;
}
# ImgsCom {
Background-color: yellow;
/* Relative positioning. When absolute positioning is enabled for the lower layer, use the origin point of p as the origin point */
Position: relative;
}
# Ulnav {
List-style-type: none;
Position: absolute;
/* Use imgsCom as the origin to absolutely locate to the bottom right corner */
Bottom: 0px;
Right: 0px;
}
# Ulnav li {
List-style-type: none;
Float: left;
Background-color: black;
Color: white;
Margin-right: 5px;
Width: 20px;
Height: 20px;
Line-height: 20px;
Text-align: center;
Cursor: pointer;
}
Index.html is as follows:
The Code is as follows:
Js and css dynamic switching Images