JS implémente facilement des images de carrousel-js tutoriel-php.cn

JS implémente facilement des images de carrousel

php中世界最好的语言

Libérer： 2018-04-18 17:10:21

original

2523 Les gens l'ont consulté

Cette fois, je vais vous présenter JS pour implémenter facilement des images de carrousel. Quelles sont les précautions pour implémenter facilement JS pour implémenter des images de carrousel. Ce qui suit est un cas pratique, jetons un coup d'œil.

Choses :

1. Tout d'abord, il doit y avoir un conteneur pour contenir les images, réglé sur la largeur et la hauteur d'une seule image, et un débordement : caché, afin de garantir qu'une seule image puisse être affichée à la fois
2. Il y a une liste d'images dans le conteneur pour le positionnement, les images sont en mode flottant et lorsque les images pivotent, la modification de la valeur Gauche de la liste entraîne la modification des images affichées.
3. Le carrousel d'images utilise une minuterie. Modifiez la valeur gauche de la liste via la minuterie afin que les images soient affichées en boucle
Lorsque la souris glisse sur l'image, effacez la minuterie et l'image. arrêtera le carrousel. Lorsque la souris est Continuez le carrousel une fois supprimé
5. Il y a un ensemble de petits points sur l'image pour correspondre à l'image actuellement affichée, et vous pouvez cliquer pour voir l'image correspondante
6. L'image peut être glissée vers la gauche et la droite en cliquant sur Afficher

Code :

<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title>轮播图</title>
 <styletype="text/css">
  .container{
   margin:0 auto;
   width:600px;
   height:400px;
   position: relative;
   overflow: hidden;
   border:4px solid gray;
   box-shadow: 3px 3px 5px gray;
   border-radius:10px;
  }
  .list{
   width:4200px;
   height:400px;
   position: absolute;
   top:0px;
  }
  img{
   float:left;
   width:600px;
   height:400px;
  }
  .dots{
   position: absolute;
   left:40%;
   bottom:30px;
   list-style: none;
  }
  .dots li{
   float:left;
   width:8px;
   height:8px;
   border-radius: 50%;
   background: gray;
   margin-left:5px
  }
  .dots .active{
   background: white;
  }
  .pre,.next{
   position: absolute;
   top:40%;
   font-size:40px;
   color:white;
   text-align:center;
   background: rgba(128,128,128,0.5);
   /* display:none;*/
  }
  .pre{
   left:30px;
  }
  .next{
   right:30px;
  }
 </style>
</head>
<body>
 <pclass="container">
  <pclass="list"style=" left:-600px;">
   <imgsrc="img/5.jpg">
   <imgsrc="img/1.jpg">
   <imgsrc="img/2.jpg">
   <imgsrc="img/3.jpg">
   <imgsrc="img/4.jpg">
   <imgsrc="img/5.jpg">
   <imgsrc="img/1.jpg">
  </p>
  <ulclass="dots">
   <liindex=1class="active dot"></li>
   <liindex=2class="dot"></li>
   <liindex=3class="dot"></li>
   <liindex=4class="dot"></li>
   <liindex=5class="dot"></li>
  </ul>
  <pclass="pre"><</p>
  <pclass="next">></p>
 </p>
<scripttype="text/javascript">
 var index=1,timer;
 function init(){
  eventBind();
  autoPlay();
 }
 init();
 function autoPlay(){
   timer =setInterval(function () {
   animation(-600);
   dotIndex(true);
  },1000)
 }
 function stopAutoPlay() {
  clearInterval(timer);
 }
 function dotIndex(add){
  if(add){
   index++;
  }
  else{
   index--;
  }
  if(index>5){
   index = 1;
  }
  if(index<1){
   index=5;
  }
  dotActive();
 }
 function dotActive() {
  vardots=document.getElementsByClassName("dot");
  varlen=dots.length;
  for(vari=0;i<len ;i++){
   dots[i].className="dot";
  }
 
  for(vari=0;i<len;i++){
   /*此处可以不用parseInt，当不用全等时*/
   if(index === parseInt(dots[i].getAttribute("index"))){
    dots[i].className="dot active";
   }
  }
 }
 function eventBind(){
  /*点的点击事件*/
  vardots=document.getElementsByClassName("dot");
  varlen=dots.length;
  for(vari=0;i<len;i++){
   (function(j){
    dots[j].onclick=function(e){
     varind=parseInt(dots[j].getAttribute("index"));
     animation((index - ind)*(-600));/*显示点击的图片*/
     index= ind;
     dotActive();
    }
   })(i)
  }
  /*容器的hover事件*/
  varcon=document.getElementsByClassName("container")[0];
  /*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
  con.onmouseover=function(e) {
   stopAutoPlay();
  }
  con.onmouseout=function(e){
   autoPlay();
  }
  /*箭头事件的绑定*/
   varpre=document.getElementsByClassName("pre")[0];
   varnext=document.getElementsByClassName("next")[0];
   pre.onclick=function(e) {
    dotIndex(false);
    animation(600);
   }
  next.onclick=function(e) {
   dotIndex(true);
   animation(-600);
  }
 }
 function animation(offset){
  varlists=document.getElementsByClassName("list")[0];
  varleft=parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
  if(left<-3000){
   lists.style.left="-600px";
  }
  else if(left>-600){
   lists.style.left = "-3000px";
  }
  else{
   lists.style.left = left+"px";
  }
 }
</script>
</body>
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Méthode de mémoire rapide régulière js

Comment ajouter du code Vue0.1 à Vue2.0 pour utiliser

JS implémente la couverture de l'échiquier

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!