Idée de conception : utilisez la minuterie dans js pour obtenir l'effet de carrousel d'images et placez toutes les images dans le dossier img. J'ai stocké trois images à la fois. Ensuite, placez les trois photos dans trois divs respectivement. L'affichage et le masquage de chaque div sont contrôlés par une minuterie. Le div avec trois chiffres dans le coin inférieur gauche représente de quelle image il s'agit. Il y a trois images au total, donc il y en a trois. 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>Comprendre HTML
HTML est ce que nous appelons les pages Web, et le format de fichier des pages Web est le format .html. Il s’agit à nos yeux d’un langage hypertexte qui ne nécessite ni compilation ni traitement supplémentaire. Une fois écrit et ouvert, c’est une page web.
Html se compose de nombreuses balises telles que
, ..., et de quelques balises sémantiques telles que
Qu'est-ce que js :
js (JavaScript) est un langage de script littéral. Les scripts JavaScript peuvent être placés directement dans le langage HTML et exécutés sur les navigateurs prenant en charge js. Il est largement utilisé dans le développement d'applications Web et est souvent utilisé pour ajouter diverses fonctions dynamiques aux pages Web afin de fournir aux utilisateurs des effets de navigation plus fluides et plus esthétiques. Lorsqu'une certaine opération est effectuée lors de la navigation sur une page Web, un événement est généré et un programme écrit en JavaScript peut répondre à l'événement correspondant.
js timer : définissez le timer setInterval('imgbox()',1000); pour exécuter la méthode imgbox toutes les secondes. La méthode imgbox inclut les modifications de l'image et de la couleur du div
Activez la minuterie
. L'objet window fournit deux méthodes pour obtenir l'effet timer, à savoir window.setTimeout() et window.setInterval. Le premier peut exécuter un morceau de code après une heure spécifiée ; tandis que le second peut exécuter un morceau de code une fois à chaque heure spécifiée. Leurs prototypes sont les suivants :
window.setTimeout(code,millisec); window.setInterval(code,millisec);
Parmi eux, le code peut être un morceau de code entouré de guillemets, ou il peut s'agir d'un nom de fonction. À l'heure spécifiée, le système appellera automatiquement la fonction. en tant que handle appelant, il ne peut prendre aucun paramètre lors de l'utilisation d'une chaîne, vous pouvez y écrire les paramètres à transmettre. Le deuxième paramètre des deux méthodes est millisec, qui représente le nombre de millisecondes pour retarder ou répéter l'exécution.
La méthode d'écriture spécifique est la suivante :
Nom de la fonction, sans paramètres setTimeout (test,1000); chaîne, code exécutable setTimeout ('test()',1000); ,1000); Remarque : L'utilisation de setInterval est la même que celle de setTimeout
Fonction d'appel avec le paramètre setTimeout ('test(parameter)',1000
disposition div : utilisez ul, li pour la mise en page
Modifiez le style comme); suit :
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;
}Structure HTML :
<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 est une grande boîte div, img est une image,
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
