快捷導(dǎo)航

jquery實(shí)現(xiàn)簡單自動(dòng)輪播圖效果

更新時(shí)間：2020年07月29日 14:05:46 作者：一像素的羈絆

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡單自動(dòng)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)簡單自動(dòng)輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="author" content="Jxz">
  <title></title>
  <script src="../jquery-3.1.1.js"></script>
  <style>
    ul,li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    #box{
      width: 520px;
      height: 280px;
      margin: 100px auto;
      position: relative;
    }
    #box .list li{
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
    #box .list li.current{
      display: block;
    }
    #box .count{
      position: absolute;
      left: 10px;
      bottom: 10px;
    }
    #box .count li{
      float: left;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fa0;
      text-align: center;
      line-height: 20px;
      margin-left: 10px;
      color: #fff;
      opacity: 0.8;
      cursor: pointer;
    }
    #box .count li.current{
      background-color: #f60;
      opacity: 1;
    }
    #box .btn{
      position: absolute;
      bottom:10px;
      right: 15px;
    }
    
    #box .btn li{
      width: 50px;
      height: 50px;
      background-color: #ccc;
      float: right;
      margin-left: 15px; 
      opacity: 0.8;
      cursor: pointer;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul class="list"> 
      <li class="current"><img src="img/01.jpg" alt=""></li>
      <li><img src="img/02.jpg" alt=""></li>
      <li><img src="img/03.jpg" alt=""></li>
      <li><img src="img/04.jpg" alt=""></li>
      <li><img src="img/05.jpg" alt=""></li>
    </ul>
    <ul class="count">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <ul class="btn">
      <li class="right">></li>
      <li class="left"><</li>
    </ul>
  </div>
</body>
</html>
<script>
  
  // var aLi=$('.list li');
  // var aNum=$('.count li');
  // 記錄當(dāng)前顯示的圖片的索引
  var current=0;
  // 保存定時(shí)器
  var timer=null;
  timer=setInterval(autoPlay,1000)
  // 自動(dòng)播放
  function autoPlay(){
    current<$('.count li').length-1?current++:current=0;
    show()
  }
  function show(){
    // aLi.hide()
    $('.list li').hide()
    .eq(current).show();
    // aNum.removeClass()
    // .eq(current).addClass('current')
    $('.count li').eq(current).toggleClass('current').siblings().removeClass('current');   
  }
  // 手動(dòng)
  $('.count li').mouseenter(function(){
    current=$(this).index()
    show()
  })
  // 按鈕控制選圖
  $('#box .left').click(function(){
    current>0?current--:current=4;
    show()
  })
  $('#box .right').click(function(){
    current<$('.count li').length-1?current++:current=0;
    show()
  })
  // 鼠標(biāo)進(jìn)圖自動(dòng)暫停
  $('#box').hover(function(){
    clearInterval(timer);
  },function(){
    timer = setInterval(autoPlay,1000);
  })


</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: