Maison > Article > interface Web > Comment utiliser JS+HTML+CSS pour obtenir un effet carrousel

Comment utiliser JS+HTML+CSS pour obtenir un effet carrousel

亚连original: 2018-06-23 17:10:151540parcourir

Cet article présente principalement JS+HTML+CSS pour réaliser l'effet carrousel en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article partagent avec vous Android Le spécifique. Le code pour afficher l'image Jiugongge est pour votre référence. Le contenu spécifique est le suivant

Code 1.lunbo.html :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>大轮播</title> 
  <link rel="stylesheet" type="text/css" href="CSS/lunbo.css"/> 
  <script src="JS/lunbo.js" type="text/javascript"></script> 
</head> 
 
<body> 
<p id="container"> 
  <p id="list" style="left: -1350px;"> 
    <img src="image/banner_3.jpg"/> 
    <img src="image/banner_1.jpg"/> 
    <img src="image/banner_2.jpg"/> 
    <img src="image/banner_3.jpg"> 
    <img src="image/banner_1.jpg"/></p> 
  <p id="buttons"> 
    <span index="1"></span> 
    <span index="2"></span> 
    <span index="3"></span> 
  </p> 
  <a href="javascript:;" id="prev" class="arrow" style="font-size:100px; text-align:center;"><</a> 
  <a href="javascript:;" id="next" class="arrow" style="font-size:100px; text-align:center;">></a></p> 
</body> 
 
</html>

Code 2.CSS/lunbo.css :

body { 
  margin: 0px; 
  padding: 0px; 
  width: 1350px; 
  height: 618px; 
} 
 
a { 
  text-decoration: none; 
} 
 
#container { 
  width: 1350px; 
  height: 618px; 
  overflow: hidden; 
  position: relative; 
  border-top: 1px solid #ac6a0a; 
} 
 
#list { 
  width: 6750px; 
  height: 618px; 
  position: absolute; 
  z-index: 1; 
} 
 
#list img { 
  float: left; 
  width: 1350px; 
  height: 618px; 
} 
 
#buttons { 
  position: absolute; 
  height: 20px; 
  width: 60px; 
  z-index: 2; 
  bottom: 20px; 
  left: 50%; 
} 
 
#buttons span { 
  cursor: pointer; 
  float: left; 
  border: 1px solid #ad6a0a; 
  width: 10px; 
  height: 10px; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border-radius: 50%; 
  margin-right: 5px; 
} 
 
#buttons .on { 
  background: orangered; 
} 
 
.arrow { 
  cursor: pointer; 
  display: none; 
  line-height: 100px; 
  text-align: center; 
  width: 40px; 
  height: 40px; 
  position: absolute; 
  z-index: 2; 
  top: 180px; 
  background-color: RGBA(0, 0, 0, 0); 
  color: #fff; 
} 
 
.arrow:hover { 
  background-color: RGBA(0, 0, 0, 0); 
} 
 
#container:hover .arrow { 
  display: block; 
} 
 
#prev { 
  left: 10px; 
  color: #ffffff; 
} 
 
#next { 
  right: 10px; 
  color: #ffffff; 
}

Code 3.JS/lunbo.js :

window.onload = function () { 
  var container = document.getElementById(&#39;container&#39;); 
  var list = document.getElementById(&#39;list&#39;); 
  var buttons = document.getElementById(&#39;buttons&#39;).getElementsByTagName(&#39;span&#39;); 
  var prev = document.getElementById(&#39;prev&#39;); 
  var next = document.getElementById(&#39;next&#39;); 
  var index = 1; 
  var len = 3; 
  var animated = false; 
  var interval = 3000; 
  var timer; 
  var size = 1350; 
 
  function animate(offset) { 
    if (offset == 0) { 
      return; 
    } 
    animated = true; 
    var time = 300; 
    var inteval = 10; 
    var speed = offset / (time / inteval); 
    console.log("speed:" + speed); 
    var left = parseInt(list.style.left) + offset; 
 
    var go = function () { 
      if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) { 
        list.style.left = parseInt(list.style.left) + speed + &#39;px&#39;; 
        console.log(list.style.left); 
        setTimeout(go, inteval); 
      } else { 
        list.style.left = left + &#39;px&#39;; 
        if (left > -200) { 
          list.style.left = -size * len + &#39;px&#39;; 
        } 
        if (left < ( -size * len)) { 
          list.style.left = &#39;-&#39; + size + &#39;px&#39;; 
        } 
        animated = false; 
        console.log("left:" + list.style.left); 
      } 
    } 
    go(); 
  } 
 
  function showButton() { 
    for (var i = 0; i < buttons.length; i++) { 
      if (buttons[i].className == &#39;on&#39;) { 
        buttons[i].className = &#39;&#39;; 
        break; 
      } 
    } 
    buttons[index - 1].className = &#39;on&#39;; 
  } 
 
  function play() { 
    timer = setTimeout(function () { 
        next.onclick(); 
        play(); 
      }, 
      interval); 
  } 
 
  function stop() { 
    clearTimeout(timer); 
  } 
 
  next.onclick = function () { 
    if (animated) { 
      return; 
    } 
    if (index == len) { 
      index = 1; 
    } else { 
      index += 1; 
    } 
    animate(-size); 
    showButton(); 
  } 
  prev.onclick = function () { 
    if (animated) { 
      return; 
    } 
    if (index == 1) { 
      index = len; 
    } else { 
      index -= 1; 
    } 
    animate(size); 
    showButton(); 
  } 
  for (var i = 0; i < buttons.length; i++) { 
    buttons[i].onclick = function () { 
      if (animated) { 
        return; 
      } 
      if (this.className == &#39;on&#39;) { 
        return; 
      } 
      var myIndex = parseInt(this.getAttribute(&#39;index&#39;)); 
      var offset = -size * (myIndex - index); 
 
      animate(offset); 
      index = myIndex; 
      showButton(); 
    } 
  } 
  container.onmouseover = stop; 
  container.onmouseout = play; 
  play(); 
};

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment utiliser la fenêtre EasyUI dans jQuery

Comment implémenter les coordonnées croisées suite à l'effet de la souris dans JS

Problèmes concernant les chemins d'image non sécurisés lors de l'utilisation d'Angular4

Comment créer des applications Electron dans Webpack

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter une liaison de données bidirectionnelle à l'aide de vue, angulaire et réactionArticle suivant：Comment implémenter une liaison de données bidirectionnelle à l'aide de vue, angulaire et réaction

Articles Liés

Voir plus