Reines JS zur Implementierung eines Karusselldiagramms-js-Tutorial-php.cn

Reines JS zur Implementierung eines Karusselldiagramms

高洛峰

Freigeben： 2017-02-23 17:33:05

Original

1781 Leute haben es durchsucht

Ich habe mir in letzter Zeit js-Animationen angesehen und heute habe ich ein weiteres Karussellbild erhalten, das mit reinem js implementiert, aber nicht verschönert ist. Wenn Sie es brauchen, können Sie es selbst verschönern

Der folgende Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>图片轮播的效果</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
    }
    body {
      padding: 20px;
    }
    #container {
      position: relative;
      width: 600px;
      height: 400px;
      border: 3px solid #333;
      overflow: hidden;
    }
    #list {
      position: absolute;
      z-index: 1;
      width: 4200px;
      height: 400px;
    }
    #list img {
      float: left;
      width: 600px;
      height: 400px;
    }
    #buttons {
      position: absolute;
      left: 250px;
      bottom: 20px;
      z-index: 2;
      height: 10px;
      width: 100px;
    }
    #buttons span {
      float: left;
      margin-right: 5px;
      width: 10px;
      height: 10px;
      border: 1px solid #fff;
      border-radius: 50%;
      background: #333;
      cursor: pointer;
    }
    #buttons .on {
      background: orangered;
    }
    .arrow {
      position: absolute;
      top: 180px;
      z-index: 2;
      display: none;
      width: 40px;
      height: 40px;
      font-size: 36px;
      font-weight: bold;
      line-height: 39px;
      text-align: center;
      color: #fff;
      background-color: RGBA(0, 0, 0, .3);
      cursor: pointer;
    }
    .arrow:hover {
      background-color: RGBA(0, 0, 0, .7);
    }
    #container:hover .arrow {
      display: block;
    }
    #prev {
      left: 20px;
    }
    #next {
      right: 20px;
    }
  </style>
</head>
<body>
<p id="container">
  <p id="list" style="left: -600px;">
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动" />
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动" />
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="无缝滚动" />
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="无缝滚动" />
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="无缝滚动" />
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动" />
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动" />
  </p>
  <p id="buttons">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
  </p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a>
</p>
<script type="text/javascript">
  window.onload=function(){
    var container = document.getElementById("container");
    var list = document.getElementById("list");
    var buttons = document.getElementById("buttons").getElementsByTagName(&#39;span&#39;);
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var index = 1;
   function animate(offset){
     var newLeft = parseInt(list.style.left) + offset;
     list.style.left = newLeft + &#39;px&#39;;
     if(newLeft<-3000){
       list.style.left= -600 +&#39;px&#39;;
     }
     if(newLeft>-600){
       list.style.left = -3000 + &#39;px&#39;;
     }
   }
   function buttonsshow(){
     for(var i =0; i<buttons.length;i++){
       if(buttons[i].className == &#39;on&#39;){
         buttons[i].className=&#39;&#39;;
       }
     }
     buttons[index-1].className=&#39;on&#39;;
   }
   prev.onclick = function(){
     index-=1;
     if(index<1)
     {
       index=5;
     }
     buttonsshow();
     animate(600);
   };
   next.onclick = function(){
     index+=1;
     if(index>5){
       index=1;
     }
     buttonsshow();
     animate(-600);
   };
   //自动播放
   var timer;
    function play(){
      timer= setInterval(function(){
        next.onclick();
      },1000)
    }
    play();
    function stop(){
      clearInterval(timer);
    }
    container.onmouseover=stop;
    container.onmouseout=play;
for(var i=0; i<buttons.length; i++){
  ( function(i){
      buttons[i].onclick=function(){
        var clickindex= parseInt(this.getAttribute(&#39;index&#39;));
        var offset = 600*(index-clickindex);
        animate(offset);
        index = clickindex;
        buttonsshow();
      }
  })(i);
}
  }
</script>
</body>
</html>

Nach dem Login kopieren

Das Obige ist die reine JS-Implementierung des vom Herausgeber eingeführten Karusselldiagramms. Ich hoffe, es wird hilfreich sein Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Artikel zur reinen JS-Implementierung von Karussellbildern finden Sie auf der chinesischen PHP-Website!