CSS3轮播图功能实现

利用jq + css3过渡，完成以上轮播图效果，通过鼠标点击指示器后轮播切换。

一、CSS3

<style>
    *{
      padding: 0;
      margin: 0;
    }
    #wrap{
      width: 500px;
      height: 300px;
      border: 1px solid #000;
      position: absolute;
      top:50%;
      left:50%;
      margin-left:-250px;
      margin-top:-150px;
      overflow: hidden;
    }
    .fixed:after{
      content: '';
      display: block;
      clear:both;
    }
    ul{
      width: 2500px;
    }
    ul>li{
      float: left;
      width: 500px;
      height: 300px;
      text-align: center;
      line-height: 300px;
      font-size: 100px;
      list-style: none;
    }
    ol>li{
      float: left;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #000;
      text-align: center;
      line-height: 30px;
      font-size: 20px;
      color:#fff;
      list-style: none;
      margin-left:10px;
      cursor: pointer;
    }
    ol>li.active{
      background:#fff;
      color: #000;
    }
    ol{
      position: absolute;
      left: 150px;
      top: 250px;
    }
  </style>

二、HTML

 <div id='wrap'>
    <ol class='fixed'>
      <li class='active'>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
    <ul class='fixed'>
      <li style='background-color:red'>1</li>
      <li style='background-color:blue'>2</li>
      <li style='background-color:deeppink'>3</li>
      <li style='background-color:green'>4</li>
      <li style='background-color:yellow'>5</li>
    </ul>
  </div>

三、jQuery

 <script src="../js/jquery-1.11.1.js"></script>
  <script>

    $('ol>li').on('click',function(){
      // 切换模式
      $(this).addClass('active').siblings().removeClass('active');

      // 被点击的li的下标
      let i = $(this).index();
      $('ul').css({marginLeft: -i * 500});
    })
  </script>

执行结果：