轮播JavaScript写法，通用于图片还是文字还是链接

JavaScript部分：

  <script type="text/javascript">
  window.onload = function() {
    function $(param) {
      if (arguments[1] == true) {
        return document.querySelectorAll(param);
      } else {
        return document.querySelector(param);
      }
    }
    var $box = $(".reportbox");
    var $box1 = $(".reportboximg ul li", true);
    var $box2 = $(".reportboxcp ul");
    var $box3 = $(".reportboxbtn");
    var $length = $box1.length;

    var str = "";
    for (var i = 0; i < $length; i++) {
      if (i == 0) {
        str += "<li class='on'>" + (i + 1) + "</li>";
      } else {
        str += "<li>" + (i + 1) + "</li>";
      }
    }
    $box2.innerHTML = str;

    var current = 0;

    var timer;
    timer = setInterval(go, 3000);

    function go() {
      for (var j = 0; j < $length; j++) {
        $box1[j].style.display = "none";
        $box2.children[j].className = "";
      }
      if ($length == current) {
        current = 0;
      }
      $box1[current].style.display = "block";
      $box2.children[current].className = "on";
      current++;
    }

    for (var k = 0; k < $length; k++) {
      $box1[k].onmouseover = function() {
        clearInterval(timer);
      }
      $box1[k].onmouseout = function() {
        timer = setInterval(go, 3000);
      }
    }
    for (var p = 0; p < $box3.children.length; p++) {
      $box3.children[p].onmouseover = function() {
        clearInterval(timer);
      };
      $box3.children[p].onmouseout = function() {
        timer = setInterval(go, 3000);
      }
    }

    for (var u = 0; u < $length; u++) {
      $box2.children[u].index = u;
      $box2.children[u].onmouseover = function() {
        clearInterval(timer);
        for (var j = 0; j < $length; j++) {
          $box1[j].style.display = "none";
          $box2.children[j].className = "";
        }
        this.className = "on";
        $box1[this.index].style.display = "block";
        current = this.index + 1;
      }
      $box2.children[u].onmouseout = function() {
        timer = setInterval(go, 5000);
      }
    }

    $box3.children[0].onclick = function() {
      back();
    }
    $box3.children[1].onclick = function() {
      go();
    }

    function back() {
      for (var j = 0; j < $length; j++) {
        $box1[j].style.display = "none";
        $box2.children[j].className = "";
      }
      if (current == 0) {
        current = $length;
      }
      $box1[current - 1].style.display = "block";
      $box2.children[current - 1].className = "on";
      current--;
    }
  }
  </script>

CSS部分：

.reportbox {
  width: 225px;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding: 0 !important;
}

.reportboximg ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.reportboximg>ul>li {
  width: 225px;
  height: 80px;
  position: relative;
  overflow: hidden;
}
.reportboximg>ul>li>a {
  padding-left: 45px !important;
  width: 225px;
  height: 80px;
  position: relative;
  overflow: hidden;
}
.reportboximg>ul>li>a>img {
  display: block;
  width: 225px;
  height: 80px;
  border:0;
}

.reportboximg>ul>li>h2 {
  position: absolute;
  margin: 0;
  left: 0;
  bottom: 0;
  height: 40px;
  width: 225px;
  background: rgba(125, 125, 120, .4);
  text-indent: 2em;
  padding-right: 10px;
  font-size: 15px;
  line-height: 40px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: normal;
  color: ghostwhite
}

.reportboxcp {
  position: absolute;
  display: none;
  right: 10px;
  bottom: 14px;
}

.reportboxcp>ul>li {
  float: left;
  width: 12px;
  height: 12px;
  overflow: hidden;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  text-indent: 100px;
  cursor: pointer;
}

.reportboxcp>ul>.on {
  background: rgba(255, 255, 255, 0.6);
}


.reportboxbtn>span {
  /*background: rgba(255, 255, 255, 0.341);*/
  border-radius: 5px;
  color: #2f7ef6;
  cursor: pointer;
  font-size: 26px;
  font-weight: bold;
  height: 69px;
  line-height: 69px;
  margin-top: -40px;
  position: absolute;
  text-align: center;
  top: 40%;
  width: 25px;
}

.reportboxbtn>.prev {
  top: 50%;
  left: 10px;
}

.reportboxbtn>.next {
  top: 50%;
  right: 10px;
}

.reportboxbtn>span::selection {
  /*background: transparent;*/
}

.reportboxbtn>span:hover {
  /*background: rgba(125, 125, 120, .8);*/
}

HTML部分：

          <div class="reportbox">
            <div class="reportboximg">
              <ul>
                <li>
                  <a href="http://www.bjinternetcourt.gov.cn" target="_blank">北京互联网法院</a>
                  <!-- <h2>轮播-1</h2> -->
                </li>
                <li>
                  <a href="http://www.netcourt.gov.cn" target="_blank">广州互联网法院</a>
                  <!-- <h2>轮播-2</h2> -->
                </li>
                <li>
                  <a href="http://www.gzinternetcourt.gov.cn" target="_blank">杭州互联网法院</a>
                  <!-- <h2>轮播-3</h2> -->
                </li>
              </ul>
            </div>
            <div class="reportboxcp">
              <ul>
              </ul>
            </div>
            <div class="reportboxbtn">
              <span class="prev"> ⟨ </span>
              <span class="next"> ⟩ </span>
            </div>
          </div>