SOURCE

// $$("focus-pic li")
$$("focus-dot li").addEvent

var i = 0;
var c = null;
c = setTimeout(carousel, 1000); //开始执行  
function carousel() { 
  clearTimeout(c); //清除定时器  
  $("#pic" + i).removeClass("active");
  $("#pic" + (i + 1)).addClass("active");
  i++;
  $("ol li").removeClass("active");
  $("ol li:eq(" + i + ")").addClass("active");

  if (i > 4) {
    $("#pic" + (i - 1)).removeClass("active");
    $("#pic0").addClass("active");
    i = 0;
    $("ol li:eq(" + i + ")").addClass("active");  
  }
  c = setTimeout(carousel, 1000); //设定定时器，循环执行               
}

<div class="focus" id="focus">
  <ul class="focus-pic" id="focus-pic">
    <li style="background-color: rgb(51, 111, 200);">
      <img src="http://www.umeng.com/img/index/demo/120203.d5ab29abd4c32cb5a6279f449986eafc.jpg">
    </li>
    <li style="background-color: rgb(27, 183, 222);">
      <img src="http://www.umeng.com/img/index/demo/120201.c5280dc68efe549cf9d653c970110651.jpg">
    </li>
    <li style="background-color: rgb(94, 197, 144);">
      <img src="http://www.umeng.com/img/index/demo/120202.f65ea5efe35637bce5ea20d83a7bab3d.png">
    </li>
    <li style="background-color: rgb(47, 91, 164);">
      <img src="http://www.umeng.com/img/index/demo/1129.390b0db321b0078d9abef3e77435f1c9.jpg">
    </li>
    <li style="background-color: rgb(73, 186, 186);">
      <img src="http://www.umeng.com/img/index/demo/112202.808c59ffbc9793add123d763e05cc9cf.png">
    </li>
    <li style="background-color: rgb(51, 111, 200);">
      <img src="http://www.umeng.com/img/index/demo/120203.d5ab29abd4c32cb5a6279f449986eafc.jpg">
    </li>
    <li style="background-color: rgb(27, 183, 222);">
      <img src="http://www.umeng.com/img/index/demo/120201.c5280dc68efe549cf9d653c970110651.jpg">
    </li>
  </ul>
  <ul class="focus-dot" id="focus-dot">
    <li class="">
    </li>
    <li class="">
    </li>
    <li class="">
    </li>
    <li class="active">
    </li>
    <li class="">
    </li>
  </ul>
</div>

body {
  overflow-x: hidden; 
}

.focus-dot li,
.info-pic img,
.info-report a,
.popup-button span,
.popup-close,
.popup-tab-main .triangle-down,
.popup-tab-main li,
.scroll-top {
  transition: .3s
}

.focus {
  position: relative;
  overflow: hidden;
  background: url(/img/index/loading.29d5b7fe93786753f24896282a6a8aed.gif) 50% no-repeat;
  width: 100%;
  height: 400px
}

.focus-dot {
  position: absolute;
  width: 100%;
  left: 0;
  height: 8px;
  bottom: 20px;
  text-align: center;
  z-index: 10
}

.focus-dot li {
  display: inline-block;
  width: 12px;
  height: 12px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 6px;
  margin: 0 5px;
  cursor: pointer
}

.focus-dot li.active {
  width: 40px
}

.focus-dot li:hover {
  background-color: #9da4ad
}

.focus-pic,
.focus-pic a,
.focus-pic li {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden
}

.focus-pic img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: 100%
}

.focus-pic {
  width: 10000%;
  overflow: hidden
}

.focus-pic li {
  width: 1%;
  float: left
}

.customer-focus-arrow {
  position: absolute;
  width: 100%;
  height: 0;
  top: 50%;
  margin-top: -24px;
  left: 0;
  z-index: 20
}

.customer-focus-arrow em,
.customer-focus-arrow span {
  width: 46px;
  height: 46px;
  border: 1px solid #ecedef;
  border-radius: 50%;
  cursor: pointer;
  background-color: #fff
}

.customer-focus-arrow span {
  float: left;
  margin-left: -24px
}

.customer-focus-arrow em {
  float: right;
  margin-right: -24px
}

.customer-focus-arrow em:hover,
.customer-focus-arrow span:hover {
  background-color: #f7f8f9
}

@media (max-width: 480px) {
  .focus {
    height: 165px
  }
  .intro h2 {
    font-size: 16px
  }
}