轮播盒子

HTML：

<div class='nav'>
  <ul>
    <li class='color'>渡梵尘</li>
    <li>渡梵尘</li>
    <li>渡梵尘</li>
    <li>渡梵尘</li>
  </ul>
<div class="tu">
  <ol>
    <li class='now'>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ol>
</div>
</div>

css:

<style>
  *{
  padding: 0;
  margin: 0;
  list-style: none;
  }
  .nav{
    width: 320px;
    height: 50px;
    background-color: yellowgreen;
    position: relative;
    margin: 100px auto;
  }
  .nav li{
    width: 80px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    float: left;
    border: 1px solid #000;
    box-sizing: border-box;
  }
  .tu{
    width: 500px;
    height: 400px;
    position: absolute;
    top: 50px;
    left: 0;
    border: 1px solid #000;
  }
  .tu li{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }
  .tu .now{
    display: block;
  }
  .nav .color{
    border-top: 2px solid red;
    background-color: #fff;
  }
  .tu li:nth-child(1){
    background-color: skyblue;
  }
  .tu li:nth-child(2){
    background-color: hotpink;
  }
  .tu li:nth-child(3){
    background-color: purple;
  }
  .tu li:nth-child(4){
    background-color: firebrick;
  }
</style>

js方法：

<script>
  //js方法
  var lis =document.querySelectorAll(".nav ul li");
  var tlis =document.querySelectorAll(".tu li");

  for(var i =0; i < lis.length; i++){
    lis[i].index =i; //存一个下标
    lis[i].onclick = function () {
      for(var i =0; i < lis.length; i++){
        lis[i].classList.remove('color');
        tlis[i].classList.remove('now');
      }
        this.classList.add('color');
        tlis[this.index].classList.add('now');
    }
  };

</script>

jQ方法：

<script src='jquery-1.12.4.js'></script>
<script>
  /*jQ方法*/
  $(function () {
    $('.nav ul li').on('click',function () {
      $(this).addClass('color').siblings().removeClass('color');
      //$(this).index()拿到当前下标
      $('.tu ol li').eq($(this).index()).addClass('now').siblings().removeClass('now');
    })
  });
</script>

猜你喜欢