js、jquery轮播图片代码

$(()=>{
const LIWIDTH=960;
$.get("data/index/getCarousel.php")
.then(data=>{
  var html="";
  for(var img of data){
    html+=`<li>
      <a href="${img.href}" title="${img.title}">
        <img src="${img.img}">
      </a>
    </li>`;
  }
  html+=`<li>
    <a href="${data[0].href}" title="${data[0].title}">
      <img src="${data[0].img}">
    </a>
  </li>`;
  var $ul=$(".banner-img");
  $ul.html(html)
    .css("width",LIWIDTH*(data.length+1));
  var $ids=$(".indicators");
  $ids.html("<li></li>".repeat(data.length))
    .children().first().addClass("hover");
  
  const WAIT=3000,DURA=500;
  var moved=0,timer=null;
  function move(dir=1){
    moved+=dir;
    $ul.animate({
      left:-LIWIDTH*moved
    },DURA,()=>{
      if(moved==data.length){
        $ul.css("left",0);
        moved=0;
      }
      $ids.children(":eq("+moved+")")
        .addClass("hover")
        .siblings().removeClass("hover")
    })
  }
  var timer=setInterval(move,WAIT);


  $("#banner").hover(
    ()=>{ clearInterval(timer); timer=null; },
    ()=>{ timer=setInterval(move,WAIT); }
  );
  $("[data-move=right]").click(()=>{
    if(!$ul.is(":animated")) 
      move();
  });
  $("[data-move=left]").click(()=>{
    if(!$ul.is(":animated")){
      if(moved==0){
        $ul.css("left",-LIWIDTH*data.length);
        moved=data.length;
      }
      move(-1);
    }
  })
  $ids.on("mouseover","li",function(){
    var $li=$(this);
    var i=$li.index();
    moved=i;
    $ul.stop(true).animate({
      left:-LIWIDTH*moved
    },DURA,()=>{
      $ids.children(":eq("+i+")")
        .addClass("hover")
        .siblings().removeClass("hover");
    })
  });
})

})

//下面是对应的html

 <div id="banner">
      <!-- 图片区域 -->
      <ul class="banner-img" 
          data-load="bannerImgs">

       <!--动态加载的-->

          <!-- 
            <li>
              <a href="${product-details.html?lid=28}">
                <img src="${img/index/banner1.png}">
              </a>
            </li> 
          -->
          <li style="left:50%; margin: 180px 0 0 -19px;">
            <img src="img/loading.gif">
          </li>
      </ul>
      <!--左右方向按钮-->
      <a href="javascript:;" class="ck-slide ck-left" data-move="left"></a>
      <a href="javascript:;" class="ck-slide ck-right" data-move="right"></a>
      <!--导航小圆点-->
      <ul class="indicators" data-load="bannerInds">
        <!-- <li></li> -->
      </ul>
    </div>

//下面是对应的css

#banner{
    width:960px;
    height:384px;
    overflow:hidden;
    position:relative;
}
#banner ul.banner-img{
    position:absolute; left:0;
}
#banner ul.banner-img>li{float:left;width:960px;}
#banner ul.banner-img img{
    width:960px;
    height:384px;
}
#banner a.ck-slide{
    position:absolute;
    top:157px;
    width:35px;
    height:70px;
    border-radius:3px;
    background:#000;
    opacity:0.15;
    transition:all .3s linear;
}
#banner a.ck-left{
    left:5px;
    background: #000 url(../img/index/arrow-left.png) no-repeat center center;
}
#banner a.ck-right{
    right:5px;
    background:#000 url(../img/index/arrow-right.png) no-repeat center center;
}
#banner a.ck-slide:hover{
    opacity:0.3;
}
#banner ul.indicators{
    position:absolute;
    bottom:10px;
    left:50%;
    margin-left:-34px;
}
#banner ul.indicators li{
    width:12px;
    height:12px;
    background:#fff;
    border-radius:50%;
    float:left;
    margin-right:5px;
    transition:all .2s linear;
}
#banner ul.indicators li:hover,#banner ul.indicators li.hover{
    cursor:pointer;
    background-color:#0AA1ED;
}

//下面是php获取数据库

<?php
header("Content-Type:application/json");
$conn= mysqli_connect("127.0.0.1","root","","yijian",3306);
$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);
$sql="select * from yi_carousel";
echo json_encode(
  mysqli_fetch_all(
    mysqli_query($conn,$sql),1
  )
);