JavaScript 轮播图实例

时间：2021-01-17 15:45:26

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

      #submit a{font-size:25px; font-weight:; 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);

          }

        }

相关文章