JS, HTML, CSS, um einen Karusselleffekt zu erzielen-js-Tutorial-php.cn

JS, HTML, CSS, um einen Karusselleffekt zu erzielen

小云云

Freigeben： 2017-12-07 15:51:21

Original

1861 Leute haben es durchsucht

In der Front-End-Entwicklung kann niemand ohne die drei Sprachen JS, HTML und CSS eine sehr gute Entwicklung erreichen. In diesem Artikel wird hauptsächlich der durch JS + HTML + CSS erzielte Karusselleffekt ausführlich vorgestellt Interessierte Freunde können sich darauf beziehen.

1.lunbo.html-Code:

<!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>

Nach dem Login kopieren

2.CSS/lunbo.css Code:

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; 
}

Nach dem Login kopieren

3.JS/lunbo.js-Code:

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(); 
};

Nach dem Login kopieren

Verwandte Empfehlungen:

Zusammenfassung der Probleme bei der mobilen Videowiedergabe

Implementieren Sie js-Code für die Musikwiedergabe, der mit verschiedenen Browsern kompatibel ist

So verwenden Sie HTML5, um einen Web-Musikplayer zu schreiben

Das obige ist der detaillierte Inhalt vonJS, HTML, CSS, um einen Karusselleffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!