轮播源码

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>轮播</title>
  <style>
  ul,li{
    list-style:none;
    margin: 0;
    padding: 0;
  }

  .carousel{
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
  }
  .carousel .img-ct{
    position: absolute;
    height: 200px;
    width: 1200px;
  }
  .carousel .img-ct:after{
    content: '';
    display: block;
    clear: both;
  }
  .carousel .img-ct>li{
    float: left;
  }
  .carousel .img-ct img{
    width: 300px;
    height: 200px;
  }
  .carousel .btn{
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    text-decoration: none;
    color: #fff;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.6;
    display: block;
  }
  .carousel .btn-pre{
    left: 10px;
  }
  .carousel .btn-next{
    right: 10px;
  }

  .carousel .bullet-ct{
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
  }
  .carousel .bullet{
/*    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 20px;
    width: 150px;*/

    display: inline-block;
  }
  .carousel .bullet:after{
/*    content: '';
    display: block;
    clear: both;*/
  }
  .carousel .bullet>li{
    /*float: left;*/
    display: inline-block;
    width: 20px;
    height: 6px;
    border-radius: 3px;
    background-color: #fff;
    margin: 0 5px;
  }
  .carousel .bullet .active{
    background-color: #666;
  }


  </style>
</head>
<body>
  <div class="carousel">
    <ul class="img-ct">
      <li data-index=0><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="1.jpg"></a></li>
      <li data-index=1><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt="2.jpg"></a></li>
      <li data-index=2><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt="3.jpg"></a></li>
      <li data-index=3><a href=""><img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt="4.jpg"></a></li>
    </ul>
    <a class="btn btn-pre" href="#">&lt;</a>
    <a class="btn btn-next" href="#">&gt;</a>
    <div class="bullet-ct">
      <ul class="bullet">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
      </ul> 
    </div>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
  // $(function(){
    var $imgCt = $('.img-ct'),
        $preBtn = $('.btn-pre'),
        $nextBtn = $('.btn-next'),
        $bullet = $('.bullet');

    var $firstImg = $imgCt.find('li').first(),
        $lastImg = $imgCt.find('li').last();

    var curPageIndex = 0;
    var imgLength = $imgCt.children().length;
    var isAnimate = false;

    $imgCt.prepend($lastImg.clone())
    $imgCt.append($firstImg.clone())

    $imgCt.width($firstImg.width() * $imgCt.children().length)
    $imgCt.css('left', '-300px')

    $preBtn.on('click', function(e){
      e.preventDefault();
      playPre();
    })

    $nextBtn.on('click', function(e){
      e.preventDefault();
      playNext();
    })



    function playNext(n){
      if(isAnimate) return;
      isAnimate = true;
      $imgCt.animate({
        left: '-=300'
      }, function(){
        curPageIndex++;
        if(curPageIndex === imgLength){
          $imgCt.css({'left': '-300px'})
          curPageIndex = 0
        }
        isAnimate = false;
        setBullet();
      })
    }

    function playPre(){
      if(isAnimate) return;
      isAnimate = true;
      $imgCt.animate({
        left: '+=300'
      }, function(){
        curPageIndex--;
        if(curPageIndex < 0){
          $imgCt.css('left', -(imgLength*$firstImg.width()));
            curPageIndex = imgLength - 1
        }
        isAnimate = false;
        setBullet()
      })
    }

    function setBullet(){
      $bullet.children()
             .removeClass('active')
             .eq(curPageIndex)
             .addClass('active')
    }

  // })





  </script>
  </div>
</body>
</html>
轮播

轮播源码

results matching ""

No results matching ""
