首页 > 代码库 > 轮播图(一)

轮播图(一)

<style>
  *{ margin:0; padding:0; list-style:none; }
  .box{ width:520px; height:280px; margin:100px auto; overflow:-hidden; position:relative; border:2px solid pink; }
  .box ul{ width:520px; height:248px; position:relative; }
  .box li{ position:absolute; left:0; top:0; }
  .box p{ cursor:pointer; position:absolute; top:50%; margin-top:-50px; height:100px; width:50px; background:rgba(0,0,0,0.5); color:#fff; font-size:36px; line-height:100px; text-align:center; }
  .box #prev{ left:0; }
  .box #next{ right:0; }

  #btn{ position:absolute; bottom:10px; left:50%; margin-left:-60px; }
  #btn span{ cursor:pointer; width:20px; height:20px; background:#f00; float:left; margin:5px; }
  #btn .on{ background:yellow; }
</style>

<script src="http://www.mamicode.com/js/move.js"></script>
<script>
  window.onload=function (){
    var oUl=document.getElementById(‘ul‘);
    var aLi=oUl.children;
    var oPrev=document.getElementById(‘prev‘);
    var oNext=document.getElementById(‘next‘);
    var aBtn=document.getElementById(‘btn‘).children;

    var iNow=0;
    for(var i=0; i<aBtn.length; i++){
      (function (index){
        aBtn[i].onclick=function (){
          iNow=index;
          tab();
        };
      })(i);
    }
    function tab(){
      for(var i=0; i<aBtn.length; i++){
        aBtn[i].className=‘‘;
        move(aLi[i],{opacity:0});
      }
      aBtn[iNow].className=‘on‘;
      move(aLi[iNow],{opacity:1});
    }

    oNext.onclick=function (){
      iNow++;
      if(iNow==aBtn.length){
        iNow=0;
      }
      tab();
    };
    oPrev.onclick=function (){
      iNow--;
      if(iNow==-1){
        iNow=aBtn.length-1;
      }
      tab();
    };
  };
</script>

<body>
  <div id="box" class="box">
    <ul id="ul">
      <li><img src="http://www.mamicode.com/images/3.webp" /></li>
      <li><img src="http://www.mamicode.com/images/0.jpg" /></li>
      <li><img src="http://www.mamicode.com/images/2.jpg" /></li>
      <li><img src="http://www.mamicode.com/images/3.jpg" /></li>
    </ul>
    <p id="prev">&lt;</p>
    <p id="next">&gt;</p>
    <div id="btn">
      <span class="on"></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>

轮播图(一)