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,
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
