Heim > Artikel > Web-Frontend > HTML+CSS+jQuery implementiert Karussell-Werbebilder

HTML+CSS+jQuery implementiert Karussell-Werbebilder

php中世界最好的语言Original: 2018-03-15 12:06:293471Durchsuche

Dieses Mal zeige ich Ihnen HTML+CSS+jQuery zur Implementierung von Karussell-Werbebildern Hier sind praktische Beispiele einmal schauen.

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"> 
  <!-- 图片区域 --> 
  <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> 
  <!--导航小圆点--> 
  <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"); 
   }) 
  }); 
 }) 
})

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS implementiert die Positionierungsnavigationsleiste

So erstellen Sie einen Paging-Effekt mit jquery

Was tun, wenn jQuery beim Hinzufügen eines Elements das Bindungsereignis nicht auslösen kann

Regelmäßige Verifizierungsformel für Mobiltelefonnummer

Das obige ist der detaillierte Inhalt vonHTML+CSS+jQuery implementiert Karussell-Werbebilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML+CSS+JQuery erzielt einen Floor-Scrolling-EffektNächster Artikel：HTML+CSS+JQuery erzielt einen Floor-Scrolling-Effekt

In Verbindung stehende Artikel

Mehr sehen