jQuery轮播图淡入淡出_轮播图淡入淡出jq代码-优快云博客

本文链接：https://blog.youkuaiyun.com/z18172185535/article/details/120445542

本文介绍了如何使用jQuery库创建一个具备自动切换、点击暂停、左右滑动切换以及底部圆点导航的轮播图。通过HTML结构布局，CSS样式设置动画效果，JavaScript编写交互逻辑，实现了轮播图的淡入淡出功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：实现自动切换，点击停止，左右点击切换，底部圆点切换

HTML

<body>
		<div id="box">
			<div class="imgs">
				<a href="#"><img src="../../JavaScript/js/0909date%20对象/images/t1.png" style="display: block;"></a>
				<a href="#"><img src="../../JavaScript/js/0909date%20对象/images/t2.jpg"></a>
				<a href="#"><img src="../../JavaScript/js/0909date%20对象/images/t3.jpg"></a>
				<a href="#"><img src="../../JavaScript/js/0909date%20对象/images/t4.jpg"></a>
				<a href="#"><img src="../../JavaScript/js/0909date%20对象/images/t5.jpg"></a>
			</div>
			<div class="btn">
				<span class="left"><</span>
				<span class="right">></span>
			</div>
			<div class="circle">
				<span class="current"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>

CSS

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#box {
				margin: 0 auto;
				width: 520px;
				position: relative;
			}

			img {
				position: absolute;
				/* opacity: 0;
				transition: 2s; */
				
			}

			.btn {
				overflow: hidden;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				color: #fff;
				font-size: 40px;
				font-weight: bold;
				line-height: 35px;
				height: 50px;
				margin-top: 120px;
			}

			.btn span {
				width: 30px;
				height: 40px;
				background: rgba(255, 255, 255, .5);
				cursor: pointer;
			}

			.btn span.left {
				float: left;
			}

			.btn span.right {
				float: right;
			}

			.circle {
				position: absolute;
				bottom: -270px;
				left: 42%;
				overflow: hidden;
				background-color: rgba(255, 255, 255, .3);
				padding: 8px 4px;
				border-radius: 10px;
			}

			.circle span {
				float: left;
				width: 10px;
				height: 10px;
				background-color: #fff;
				border-radius: 50%;
				margin: 0 4px;
				cursor: pointer;
			}

			.circle span.current {
				background-color: black;
			}
</style>

JavaScript

<script type="text/javascript">
	//页面加载完成之后即触发
	$(function(){
	  //当前轮播的图片索引
	  var i = 0;
	  //自动轮播
	  function start(misecs=2000){
	    //返回计时器id
	    return setInterval(function(){
	      //判断图片是否轮播完成
	      if(i >= $(".imgs img").length-1){
	        i = -1;  //重新从第一张开始(实际下一张需要++i)
	      }
	      changePic();
	    },misecs);
	  }
	  var timer = start();
	  //上一页
	  $(".left").click(function(){
	    //判断当前页是不是第一张
	    if(i == 0){
	      i = $(".imgs img").length;
	    }
	    changePic("prev");
	  })
	  //下一页
	  $(".right").click(function(){
	    //判断图片是否轮播完成
	    if(i >= $(".imgs img").length-1){
	      i = -1;  //重新从第一张开始(实际下一张需要++i)
	    }
	    changePic();
	  })
	  //鼠标进入轮播图,则停止轮播
	  $("#box").mouseenter(function(){
	    clearInterval(timer);
	  })
	  //鼠标离开轮播图,则重新开始轮播
	  $("#box").mouseleave(function(){
	    timer = start();
	  })
	  //给底部圆点绑定事件
	  $(".circle>span").click(function(){
	    i = $(this).index();
	    changePic("select");
	  })
	  //切换轮播图
	  function changePic(direction="next"){
	    if(direction == "prev"){
	      //上一页
	      --i;
	    }else if(direction == "next"){
	      //下一页
	      ++i;
	    }
	    //将下一张图片显示
	    $(".imgs img").fadeOut().eq(i).fadeIn();
	    //将下一张图片对应的圆点添加样式
	    $(".circle>span").removeClass("current").eq(i).addClass("current");
	  }
	})
</script>