fade.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>轮播渐变</title>
  <style type="text/css">
    ul,li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none;
    }
    .carousel {
      position: relative;
      width: 300px;
      height: 200px;
      overflow: hidden;
    }
    .carousel>.img-ct {
      position: absolute;
/*      position: relative;
      height: 200px;*/
      width: 1200px;
    }
    .carousel>.img-ct:after {
      content: '';
      display: block;
      clear: both;
    }
    .carousel>.img-ct li{
      float: left;
    }

    .carousel>.img-ct img {
      float: left;
      width: 300px;
      height: 200px;
    }
    .carousel>.btn {
      display: block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      color: #fff;
      font-size: 20px;
      background-color: #333;
      text-align: center;
      opacity: 0.5;
      position: absolute;
      top: 50%;
      margin-top: -15px;
    }
    .carousel>.btn:hover {
      opacity: 1;
    }
    .btn-pre {
      left: 10px;
    }
    .btn-next {
      right: 10px;
    }
    .carousel>.bullet {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
    }
    .carousel>.bullet>li {
      width: 18px;
      height: 18px;
      margin: 2px;
      border-radius: 50%;
      cursor: pointer;
/*      border: 1px solid red;*/
      display: inline-block;
/*      background-color: #000;*/
      background: url(http://static.hdslb.com/images/base/icons.png) -855px -790px no-repeat;
    }
    .carousel>.bullet>.active,.carousel>.bullet>.active:hover {
      background-position: -855px -727px;
    }
    .carousel>.bullet>li:hover {
      background-position: -919px -790px;
    }


  </style>
</head>
<body>
  <div class="carousel">
    <ul class="img-ct">
      <li data-id='0'><a href="#"><img src="https://unsplash.it/300/200/?random=1"></a></li>
      <li data-id='1'><a href="#"><img src="https://unsplash.it/300/200/?random=2"></a></li>
      <li data-id='2'><a href="#"><img src="https://unsplash.it/300/200/?random=3"></a></li>
      <li data-id='3'><a href="#"><img src="https://unsplash.it/300/200/?random=4"></a></li>
    </ul>
    <a class="btn btn-pre" href="#">&lt;</a>
    <a class="btn btn-next" href="#">&gt;</a>
    <ul class="bullet">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <script src='jquery/jquery-3.2.1.min.js'></script>
  <script type="text/javascript">
    var $imgCt = $('.img-ct')
    var $btnPre = $('.btn-pre')
    var $btnNext = $('.btn-next')
    var $bullet = $('.bullet')
    var $imgWidth = $imgCt.find('li').first().width()
    var $imgs = $imgCt.find('li')
    var imgLength = $imgCt.children().length
    var curPageIndex = 0
    var isAnimate = false


    $btnPre.on('click',function(e){
      e.preventDefault()
      playPre()
      
    })
    $btnNext.on('click',function(e){
      e.preventDefault()
      playNext()
      
    })
    $bullet.find('li').on('click',function(){
      var index = $(this).index()
      play(index)
    })

    autoPlay()

    function playPre(){
      play((imgLength+curPageIndex-1)%imgLength)
    }
    function play(idx){
      if (isAnimate)return
      isAnimate = true
      $imgs.eq(curPageIndex).fadeOut(500)
      $imgs.eq(idx).fadeIn(500,function(){
        isAnimate = false
      })
      //isAnimate = false 放在这里不能阻止重复点击
      curPageIndex = idx
      setBullet()
      // $imgCt.animate({
      //   left: '+='+$firstImg.width()*(curPageIndex-idx)
        
      // },function(){
      //   console.log(curPageIndex)
      //   curPageIndex = idx
      //   isAnimate = false
      //   console.log(curPageIndex)
      //   setBullet()
      // })
    }
    function playNext(){
      play((curPageIndex+1)%imgLength)
    }
    function setBullet(){
      $bullet.children()
             .removeClass('active')
             .eq(curPageIndex)
             .addClass('active')
    }

    function stopAuto(){
      clearInterval(clock)
    }
    function autoPlay(){
      var clock = setInterval(playNext,2000)
    }

  </script>
</body>
</html>