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

最新推荐文章于 2021-07-19 16:40:09 发布

spfLinux

最新推荐文章于 2021-07-19 16:40:09 发布

阅读量784

点赞数

分类专栏： jQuery 文章标签： JQ 轮播左右滑动

jQuery 专栏收录该内容

21 篇文章

订阅专栏

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