html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/banner.css" rel="external nofollow" > </head> <body> <p id="banner"> <!-- 圖片區(qū)域 --> <ul class="banner-img" data-load="bannerImgs"> <!-- <li> <a href="${product-details.html?lid=28}" rel="external nofollow" > <img src="${img/index/banner1.png}"> </a> </li> --> <li style="left:50%;"> <img src="img/index/banner1.png"> </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> <!--導(dǎo)航小圓點--> <ul class="indicators" data-load="bannerInds"> <!-- <li></li> --> </ul> </p> <script src="js/jquery.min.js"></script> <script src="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="${item.href}" rel="external nofollow" title="${item.title}"> <img src="${item.img}"> </a> </li>`; } html+=`<li> <a href="${data[0].href}" rel="external nofollow" title="${data[0].title}"> <img src="${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"); }) }); }) }) 鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
新聞熱點
疑難解答
