jq轮播图（最全版本，各种写法轮播图）

小刘03

已于 2022-06-17 08:55:34 修改

阅读量615

点赞数 6

文章标签： html javascript jquery

于 2022-05-30 20:51:16 首次发布

//小刘写的

本文链接：https://blog.csdn.net/liuyibo0314/article/details/125053566

版权

滑动：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JQ滑动</title>
       <script src="./js/jq/jquery-1.12.4.min.js"></script>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           .box {
               width: 1226px;
               height: 460px;
               margin: 0 auto;
               position: relative;
               overflow: hidden;
           }

           .pics {
               width: 7356px;
               height: 100%;
               position: absolute;
               left: 0;
           }

           .pics img {
               width: 1226px;
               float: left;

}

           .pics a {
               /* display: none; */
               /* opacity: 0; */
           }

.pics a:first-child {
display: block;

}

           .btn {
               width: 100%;
               height: 69px;
               position: absolute;
               top: 50%;
               margin-top: -34px;
           }

           .btn span {
               float: left;
               width: 41px;
               height: 69px;
               background: url(img/Xiaomi/icon-slides.png) -83px;
               cursor: pointer;
           }

           .btn span.next {
               float: right;
               background-position-x: right;
           }

           .btn span.prev:hover {
               background-position-x: 0;
           }

           .btn span.next:hover {
               background-position-x: -42px;
           }

           ul {
               list-style: none;
               height: 10px;
               width: 90px;
               position: absolute;
               left: 50%;
               margin-left: -45px;
               bottom: 30px;
           }

           ul li {
               float: left;
               width: 6px;
               height: 6px;
               border: 2px hsla(0, 0%, 100%, 0.3) solid;
               background-color: rgba(0, 0, 0, 0.4);
               border-radius: 10px;
               margin: 0 4px;
               cursor: pointer;
           }

           ul li.active {
               background: hsla(0, 0%, 100%, 0.3);
               border-color: rgba(0, 0, 0, 0.4);
           }
       </style>
   </head>
   <body>
       <div class="box">
           <div class="pics">
               <a href="#"><img src="img/Xiaomi/1.jpeg" alt="" /></a>
               <a href="#"><img src="img/Xiaomi/2.jpg" alt="" /></a>
               <a href="#"><img src="img/Xiaomi/3.jpg" alt="" /></a>
               <a href="#"><img src="img/Xiaomi/4.jpg" alt="" /></a>
               <a href="#"><img src="img/Xiaomi/5.jpg" alt="" /></a>

</div>

</div>
</body>
</html>

<script>
	//将第一张轮播图复制后添加到最后
	// $(".pics>a:first-child").clone().appendTo(".pics");
	$(".pics>a:first-child").clone().insertAfter(".pics>a:last-child");

	function ting() {
		return setInterval(function() {
			$("ul>li.active").removeClass("active").next().addClass("active");
			$(".pics").animate({
				left: $(".pics").position().left - $(".box").width()
			}, 1500, function() {
				//图片切换完成后判断是否已经到了最后一张
				if ($(".pics").position().left == -(($(".pics>a").length - 1) * $(".box").width())) {
					$(".pics").css("left", 0);
				}

			});
		}, 2000);
	}
	var timer = ting();
	//鼠标移动上停止自动播放
	$(".box").mouseenter(function() {
		clearInterval(timer);
	}).mouseleave(function() {
		timer = ting();
	})
	//下一页
	$(".next").click(function() {
		if ($("ul>li.active").index() == 4) {
			$("ul>li.active").removeClass("active").parent().children().eq(0).addClass("active");

		} else {
			$("ul>li.active").removeClass("active").next().addClass("active");

		}



		$(".pics").animate({
			left: $(".pics").position().left - $(".box").width()
		}, 0, function() {
			//图片切换完成后判断是否已经到了最后一张
			if ($(".pics").position().left == -(($(".pics>a").length - 1) * $(".box").width())) {
				$(".pics").css("left", 0);
			}

		});
	})
	//上一页
	$(".prev").click(function() {

		if ($(".pics").position().left == 0) {
			$("ul>li.active").removeClass("active").siblings().last().addClass("active");
			$(".pics").css("left", -(($(".pics>a").length - 2) * $(".box").width()));
		} else {
			$("ul>li.active").removeClass("active").prev().addClass("active");
			$(".pics").animate({
				left: $(".pics").position().left + $(".box").width()
			}, 0);
		}

	})

	//底部按钮
	$("ul>li").click(function() {
		$(".pics").css("left", $(this).index() * -1226 + "px");
		$("ul>li.active").removeClass("active").parent().children().eq($(this).index()).addClass("active");
	});
</script>

淡入淡出：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JQ淡入淡出轮播图</title>
       <script src="./js/jq/jquery-1.12.4.min.js"></script>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           .box {
               width: 1226px;
               height: 460px;
               margin: 0 auto;
               position: relative;
           }

           .pics {
               width: 100%;
               height: 100%;
               overflow: hidden;
           }

           .pics img {
               width: 1226px;
               position: absolute;
               left: 0;
               top: 0;

}

           .pics a {
               display: none;
           }

           .pics a:first-child {
               display: block;
           }

           .btn {
               width: 100%;
               height: 69px;
               position: absolute;
               top: 50%;
               margin-top: -34px;
           }

           .btn span.next {
               float: right;
               background-position-x: right;
           }

           .btn span.prev:hover {
               background-position-x: 0;
           }

           .btn span.next:hover {
               background-position-x: -42px;
           }

</div>
</body>
</html>

<script>
//自动播放
function autoPlay(){
	return setInterval(function(){
		 changePic("down",1500);
	},2000);
	}
	var timer = autoPlay();
	//鼠标移动上停止自动播放
	$(".box").mouseenter(function(){
		clearInterval(timer);
	}).mouseleave(function(){
		timer = autoPlay();
	})
	//下一页事件绑定
	$(".next").click(function(){
		
		changePic("down");
	})
	//上一页
	$(".prev").click(function(){
		changePic("up");
	})
	//底部按钮
	$("ul>li").click(function(){
	$(".pics>a:visible").hide().parent().children().eq($(this).index()).show();
	$("ul>li.active").removeClass("active").parent().children().eq($(this).index()).addClass("active");
	});
	
	//图片切换
	function changePic(action="down",time=0){
		if(action == "down"){
		if( $(".pics>a:visible").next().length){
		//将当前显示a隐藏，显示后一个同辈元素
		$(".pics>a:visible").hide(time).next().show(time);
		//将当前显示按钮样式移出，给后一个同辈元素
		$("ul>li.active").removeClass("active").next().addClass("active");
		}else{
			$(".pics>a:visible").hide(time).siblings().eq(0).show(time);
			$("ul>li.active").removeClass("active").siblings(":eq(0)").addClass("active");
		}}else if(action=="up"){
				if($(".pics>a:visible").index()){
				$(".pics>a:visible").hide().prev().show();
				$("ul>li.active").removeClass("active").prev().addClass("active");}else {
				$(".pics>a:visible").hide().siblings().last().show();
				$("ul>li.active").removeClass("active").siblings().last().addClass("active");
				}}else{
			$(".pics>a:visible").hide().parent().children().eq($(this).index()).show();
			$("ul>li.active").removeClass("active").parent().children().eq($(this).index()).addClass("active");
		}
	}
</script>

注意事项：jq为1.12.4版本，需自己下载链入。不然会报错。

图片大小：width: 1226px;
height: 460px;