JavaScript 轮播图实例

HTML代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Carousel</title>
  </head>
  <body>
    <div class="container">
      <div id="list" style="left:-500px;">
        <img src="../image5" alt="5">
        <img src="../image1" alt="1">
        <img src="../image2" alt="2">
        <img src="../image3" alt="3">
        <img src="../image4" alt="4">
        <img src="../image5" alt="5">
        <img src="../image1" alt="1">
      </div>
      <div id="submit">
        <a href="javascript:;" id="prev">>></a>
        <a href="javascript:;" id="next"><<</a>
      </div>

      <!-- 指示圆点 -->
      <div id="button">
        <div class="on"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </body>
</html>

CSS代码：

      *{margin:0px; padding:0px;}
      #container{height:330px; width:500px; position:relative; overflow:hidden; border:3px solid #ccc; margin:0 auto;}
      #list{width:3500px; height:310px; position:absolute;}
      #list img{height:310px; width:500px; float:right;}
      #submit{position:absolute; top:150px; width:500px; color:red; z-index:999}
      #submit a{font-size:25px; font-weight:800; color:#ccc; opacity:0.3; text-decoration:none;}
      #container:hover a{opacity:0.8;}
      #next{float:right;}
      #button{position:absolute; top:315px; left:220px;}
      #button div{height:10px; width:10px; border-radius:50%; border:1px solid #ccc; float:left;}
      #button .on{background-color:yellow;}

JavaScript代码：

        window.onload = function ()
        {
          var container = document.getElementById('container');
          var list = document.getElementById('list');
          var buttons = document.getElementById('button').getElementsByTagName('div');
          var index = 1;
          var next = document.getElementById('next');
          var prev = document.getElementById('prev');

          // 指示圆点
          function showTab ()
          {
            for (var i = 0; i < buttons.length; i ++) 
            {
              if (buttons[i].className = 'on')
              {
                buttons[i].className = '';
              }

              buttons[index - 1].className = 'on';
            }
          }

          // 定义动画方法
          function animate (offset)
          {
            var newLeft = parseInt(list.style.left) + offset;
            list.style.left = newLeft + 'px';
            if (newLeft > -500)
            {
              list.style.left = -2500 + 'px';
            }
            if (newLeft < -2500)
            {
              list.style.left = -500 + 'px';
            }
          }

          // 下一页点击
          next.onclick = function ()
          {
            // if (index == 5) 
            // {
            //   index = 1;
            // } else {
            //   index +=1;
            // }
            // 这里可以用到三元运算符
            index==5?index=1 : index+=1;
            showTab();
            animate(-500);
          }

          prev.onclick = function ()
          {
            index==1?index=5 : index-=1;
            showTab();
            animate(+500);
          }
        }

 

posted @ 2018-02-26 16:30  MiraclesGG  阅读(124)  评论(0)    收藏  举报