This article mainly introduces jquery to realize the left and right carousel switching effect in detail. It has certain reference value. Interested friends can refer to it.
The example of this article shares with you the jquery implementation of left and right. The specific code for displaying the carousel switching effect is for your reference. The specific content is as follows
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)); ?>
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Detailed introduction to Vue data binding
About website generation chapter directory code example
How to dynamically load data using treeview in the Bootstrap framework
How to jump to the previous page in vue
The above is the detailed content of How to implement left and right carousel switching in jquery. For more information, please follow other related articles on the PHP Chinese website!