HTML+CSS+jQuery實作輪播廣告圖

這次帶給大家HTML+CSS+jQuery實現輪播廣告圖，HTML+CSS+jQuery實現輪播廣告圖的注意事項有哪些，以下就是實戰案例，一起來看一下。

html:

nbsp;html> 
 
 
 <meta> 
 <title>Document</title> 
 <link> 
 
 
 <p> 
  <!-- 图片区域 --> 
  </p>

          
•           
    

                    

        

      <script></script>   <script></script>   

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+=`

                       

`;    }    html+=`

                       

`;    console.log(html);    var $ulImg=$(".banner-img");    $ulImg.html(html).css("width",LIWIDTH*(data.length+1));     var $ids=$(".indicators");       $ids.html("

".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)); 
?>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS實作定位式導覽列

#jquery怎麼做出分頁效果

jQuery在新增元素時無法觸發綁定事件怎麼處理

手機號碼的正規驗證公式

以上是HTML+CSS+jQuery實作輪播廣告圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！