캐러셀 차트를 구현하는 순수 JS-JS 튜토리얼-php.cn

캐러셀 차트를 구현하는 순수 JS

高洛峰

풀어 주다： 2017-02-23 17:33:05

원래의

1786명이 탐색했습니다.

요즘 js 애니메이션을 보고 있는데 오늘 또 다른 캐러셀 이미지를 얻었는데, 순수 js를 사용하여 구현한 것인데 미화되지 않은 것인데 필요하시면 직접 미화하셔도 됩니다

다음 코드 :

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

로그인 후 복사

위는 편집자가 소개한 캐러셀 차트의 순수 JS 구현입니다. 도움이 되길 바랍니다. 질문이 있으신 경우 메시지를 남겨주시면 시간 내에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

캐러셀 이미지의 순수 JS 구현과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!