Design idea: Use the timer in js to achieve the effect of picture carousel, and put all pictures into the img folder. I stored three photos at the time. Then put the three photos into three divs respectively. The display and hiding of each div is controlled by a timer. The div with three numbers in the lower left corner represents which picture this is. There are three pictures in total, so there are three div.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.imgbox{
width: 100%;
height:400px;
background-color: black;
transform: 1s;
}
.img{
width: 100%;
height:100%;
background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
background-repeat:no-repeat;
background-size:cover ;
}
.img0{
width: 100%;
height:100%;
background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
background-repeat:no-repeat;
background-size:100% ;
}
.img1{
width: 100%;
height:100%;
background-image: url(img/5572568_110213373115_2.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
.img2{
width: 100%;
height:100%;
background-image: url(img/5875f5fb7a8f8.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
.img3{
width: 100%;
height:100%;
background-image: url(img/980.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
ul{
margin-left:-30px ;
list-style-type: none;
position: relative;
margin-top: -100px;
line-height: 50px;
}
ul li{
float: left;
width: 50px;
height:50px;
border:1px solid #000000;
text-align: center;
background-color: aliceblue;
}
.div{
background-color: orange;
line-height: 50px;
}
.div1{
background-color: gainsboro;
line-height: 50px;
}
</style>
<script type="text/javascript">
var i=0;
function imgbox(){
i++;
if(i<4){
document.getElementById("img").className="img"+i;
if(i==1){
document.getElementById("one").className="div";
document.getElementById("two").className="div1";
document.getElementById("three").className="div1";
}
if(i==2){
document.getElementById("one").className="div1";
document.getElementById("two").className="div";
document.getElementById("three").className="div1";
}
if(i==3){
document.getElementById("one").className="div1";
document.getElementById("two").className="div1";
document.getElementById("three").className="div";
}
}
if(i==4){
i=0;
clearInterval('imgbox()');
}
}
setInterval('imgbox()',1000);
</script>
</head>
<body>
<div class="imgbox">
<div class="img" id="img"></div>
<ul id="ul">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
</ul>
</div>
</body>
</html>Understand HTML
HTML is what we call a web page, and the file format of a web page is .html format. In our eyes, it is a hypertext language that does not require additional compilation or processing. Once written and opened, it is a web page.
Html consists of many tags such as
, ..., and some semantic tags such as
What is js:
js (JavaScript) is a literal scripting language. JavaScript scripts can be placed directly in HTML language and run on browsers that support js. It is widely used in web application development and is often used to add various dynamic functions to web pages to provide users with smoother and more beautiful browsing effects. When a certain operation is performed while browsing a web page, an event is generated, and a program written in JavaScript can respond to the corresponding event.
js timer: Define the timer setInterval('imgbox()',1000); to execute the imgbox method every second. The imgbox method includes changes to the image and the color of the div
Enable timer
The window object provides two methods to achieve the effect of the timer, namely window.setTimeout() and window.setInterval. The former can make a piece of code run after a specified time; while the latter can make a piece of code run once every specified time. Their prototypes are as follows:
window.setTimeout(code,millisec); window.setInterval(code,millisec);
Among them, code can be a piece of code enclosed in quotation marks, or it can be a function name. At the specified time, the system will automatically call the function. When using the function name as When calling a handle, it cannot take any parameters; when using a string, you can write the parameters to be passed in it. The second parameter in both methods is millisec, which represents the number of milliseconds for delay or repeated execution.
The specific writing method is as follows:
Function name, without parameter setTimeout (test,1000); string, executable code setTimeout ('test()', 1000); Anonymous function setTimeout (function(){},1000); Note: The usage of setInterval is the same as setTimeout
Call the function with parameter setTimeout ('test(parameter)',1000);
div layout: use ul, li for layout
Modify the style as follows:
ul{
margin-left:-30px ;//据左部边距
list-style-type: none;//去除默认ul样式
position: relative;//采用相对定位
margin-top: -100px;//据顶部边距
line-height: 50px;//行高
}
ul li{
float: left;//浮动
width: 50px;
height:50px;
border:1px solid #000000;//边框
text-align: center;//文字居中
background-color: aliceblue;
}Html structure:
<div> <div id="img"></div> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </div>
Img is a large div box, img is a picture,
- It contains the picture number li.
The above is the detailed content of A brief analysis of how to implement simple carousel using js. For more information, please follow other related articles on the PHP Chinese website!
Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AMChoosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.
JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AMThe power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.
The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AMIntroduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr
Node.js Streams with TypeScriptApr 30, 2025 am 08:22 AMNode.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe
Python vs. JavaScript: Performance and Efficiency ConsiderationsApr 30, 2025 am 12:08 AMThe differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.
The Origins of JavaScript: Exploring Its Implementation LanguageApr 29, 2025 am 12:51 AMJavaScript originated in 1995 and was created by Brandon Ike, and realized the language into C. 1.C language provides high performance and system-level programming capabilities for JavaScript. 2. JavaScript's memory management and performance optimization rely on C language. 3. The cross-platform feature of C language helps JavaScript run efficiently on different operating systems.
Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AMJavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.
The Future of Python and JavaScript: Trends and PredictionsApr 27, 2025 am 12:21 AMThe future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
WebStorm Mac version
Useful JavaScript development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
