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

缺乏、安全感 2022-06-03 00:39 267阅读 0赞

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