Heim > Artikel > Web-Frontend > So implementieren Sie den Wechsel des linken und rechten Karussells in JQuery

So implementieren Sie den Wechsel des linken und rechten Karussells in JQuery

亚连Original: 2018-06-14 15:04:481328Durchsuche

In diesem Artikel wird hauptsächlich JQuery vorgestellt, um den Effekt des Wechsels des linken und rechten Karussells im Detail zu realisieren. Es hat einen gewissen Referenzwert.

Das Beispiel dieses Artikels teilt Ihnen die JQuery-Implementierung mit Links und rechts. Der spezifische Code zum Anzeigen des Karussellwechseleffekts dient als Referenz. Der spezifische Inhalt lautet wie folgt:

<!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); 
 
  $(&#39;#banner&#39;).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)); 
?>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Einführung in die Vue-Datenbindung im Detail

Informationen zum Kapitelverzeichniscodebeispiel zur Website-Generierung

So laden Sie Daten mithilfe der Baumansicht im Bootstrap-Framework dynamisch

So springen Sie in Vue zur vorherigen Seite

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Wechsel des linken und rechten Karussells in JQuery. 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：So erzielen Sie mit jquery einen Floor-Scrolling-EffektNächster Artikel：So erzielen Sie mit jquery einen Floor-Scrolling-Effekt

In Verbindung stehende Artikel

Mehr sehen