<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://www.jb51.net/css/banner.css" > </head> <body> <div> <!-- 图片区域 --> <ul data-load="bannerImgs"> <!-- <li> <a href="${product-details.html?lid=28}" > <img src="https://www.jb51.net/${img/index/banner1.png}"> </a> </li> --> <li> <img src="https://www.jb51.net/img/index/banner1.png"> </li> </ul> <!--左右方向按钮--> <a href="javascript:;" data-move="left"></a> <a href="javascript:;" data-move="right"></a> <!--导航小圆点--> <ul data-load="bannerInds"> <!-- <li></li> --> </ul> </div> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/js/banner.js"></script> </body> </html>
css：
/*banner部分*/ #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:150px; width:35px; height:70px; border-radius:3px; background:#000; opacity:0.15; transition:all .3s linear; } #banner a.ck-left{ left:40px; background: #000 url(../img/index/arrow-left.png) no-repeat center center; } #banner a.ck-right{ right:0px; 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; list-style: none; } #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; }
js：
$(()=>{ $.ajax({ type:"get", url:"php/xz.php", dataType:"json" }).then(data=>{ console.log(data); var html=""; const LIWIDTH=960; for(var item of data){ html+=`<li> <a href="https://www.jb51.net/${item.href}" title="${item.title}"> <img src="https://www.jb51.net/${item.img}"> </a> </li>`; } html+=`<li> <a href="https://www.jb51.net/${data[0].href}" title="${data[0].title}"> <img src="https://www.jb51.net/${data[0].img}"> </a> </li>`; console.log(html); var $ulImg=$(".banner-img"); $ulImg.html(html).css("width",LIWIDTH*(data.length+1)); var $ids=$(".indicators"); $ids.html("<li></li>".repeat(data.length)).children().first().addClass("hover"); const WAIT=2000,DURA=1000; var moved=0,timer=null; function move(dir=1){ moved+=dir; console.log("moved="+moved); $ulImg.animate({ left:-LIWIDTH*moved },DURA,()=>{ if(moved%data.length==0){ moved=0; $ulImg.css("left",0); } $ids.children(`li: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(()=>{ //防止动画叠加 /*clearInterval(timer); timer=null; move(); timer=setInterval(move,WAIT);*/ if(!$ulImg.is(":animated")) move(); }); $("[data-move=left]").click(()=>{ if(!$ulImg.is(":animated")){ if(moved==0){ $ulImg.css("left",-LIWIDTH*data.length); moved=data.length; } move(-1); } }); $ids.on("mouseover","li",function(){ var $li=$(this); var i=$li.index(); moved=i; $ulImg.stop(true).animate({ left:-LIWIDTH*moved },DURA,()=>{ $ids.children(":eq("+i+")") .addClass("hover") .siblings().removeClass("hover"); }) }); }) })
php：
<?php header("Content-type:application/json"); require_once("init.php"); $sql="SELECT img,title,href FROM xz_index_carousel"; $result=mysqli_query($conn,$sql); echo json_encode(mysqli_fetch_all($result,1)); ?>