JQ轮播(左右轮播切换，小圆点hover)

来源：互联网发布：淘宝客服删除聊天记录编辑：程序博客网时间：2024/05/20 22:40

html:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/banner.css"></head><body><div id="banner">      <!-- 图片区域 -->      <ul class="banner-img"            data-load="bannerImgs">          <!--             <li>              <a href="${product-details.html?lid=28}">                <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}" title="${item.title}">                <img src="${item.img}">              </a>            </li>`;}html+=`<li>              <a href="${data[0].href}" 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));?>

阅读全文

0 0