jquery实现左右轮播切换效果

2019-11-19 14:37:10

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了jquery实现左右轮播切换效果展示的具体代码，供大家参考，具体内容如下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：jquery实现楼层滚动效果

下一篇：jQuery中ajax获取数据赋值给页面的实例