jQuery实现轮播图

轮播图虽然在网上有很多插件可以用，但是自己亲手做一个又有何不可？就使用jquery就OK了。
先展示一下轮播图的终结版截图

轮播图需要实现的功能就不再细讲了，直接看代码吧，仔细看，不要感觉轮播图好难，代码好多就懒得看了，其实很简单。

html代码

<div class="pic">
			<img src="img/微信截图_20190705084205.png"/>
			<img src="img/微信截图_20190705084220.png"/>
			<img src="img/微信截图_20190705100148.png"/>
			<img src="img/微信截图_20190705100208.png"/>
			
			<div id="left">
			<
			</div>
		<div id="right">
			>
			</div>
			<ul id="ulObj">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

css样式代码

<style type="text/css">
			.pic{
				width: 900px;
				height: 370px;
				margin:20px auto;
				position: relative;
			}
			nav{
				width: 900px;
				height: 1500px;
				margin:0 auto;
				border: 1px solid red;
			}
			.pic img{
				width: 900px;
				height: 370px;
				position: absolute;
			}
			#left{
				width: 55px;
				height: 75px;
				border: 1px solid black;
				font-size: 50px;
				padding-left: 10px;
				background-color: rgba(0,0,0,0.5);
				color: red;
				font-weight: bold;
				position: absolute;
				top: 140px;
				cursor: pointer;
			}
			#right{
				width: 55px;
				height: 75px;
				border: 1px solid black;
				font-size: 50px;
				padding-left: 10px;
				background-color: rgba(0,0,0,0.5);
				color: red;
				font-weight: bold;
				position: absolute;
				top: 140px;
				right: 0;
				cursor: pointer;
			}
			#ulObj{
				width: 150px;
				height: 17px;
				position: absolute;
				bottom: 0px;
				list-style: none;
				left: 350px;
			}
			#ulObj li{
				float: left;
				margin-left: 10px;
				width: 15px;
				height: 15px;
				background-color: lightskyblue;
				border-radius: 45px;
			}
			#ulObj li:hover{
				background-color: white;
				cursor: pointer;
			}
		</style>

最后就是jquery了

<script type="text/javascript">
			$(function(){
				//刚开始设置一个index，index为图片的索引值
					var index=0;
					//当图片索引为0时,显示对应的图片,其他的隐藏
					$(".pic img").hide();
					$(".pic img").eq(index).show();
					//图片对应的下面的小圆圈设置背景颜色
					$("#ulObj li").eq(index).css("background-color","white");
					//设置一个定时器
					timer=setInterval(function(){
					var imgObj=$(".pic img");
					//index的值加1，如果index值大于3就等于0
					index++;
						if(index>3){
							index=0;
						}
					//设置对应之外的小圆圈背景颜色
				$("#ulObj li").css("background-color","lightskyblue");
					//设置对应索引的小圆圈背景颜色
				$("#ulObj li").eq(index).css("background-color","white");
					imgObj.fadeOut(1000);
					imgObj.eq(index).fadeIn(1000);
					},3000);
					//鼠标悬停清除定时器
				$(".pic img").mouseenter(function(){
					clearInterval(timer);
				});
				//鼠标移走重启定时器
				$(".pic img").mouseleave(function(){
					timer=setInterval(function(){
					var imgObj=$(".pic img");
					index++;
						if(index>3){
							index=0;
						}
					imgObj.fadeOut(1000);
					imgObj.eq(index).fadeIn(1000);
					$("#ulObj li").css("background-color","lightskyblue");
					$("#ulObj li").eq(index).css("background-color","white");
					},3000);
				});
				//点击下一张
				$("#right").click(function(){
					index+=1;
					if(index>3){
						index=0;
					}
					$(".pic img").fadeOut(1000);
					$(".pic img").eq(index).fadeIn(1000);
					$("#ulObj li").css("background-color","lightskyblue");
					$("#ulObj li").eq(index).css("background-color","white");
				});
				//点击上一张
				$("#left").click(function(){
					index-=1;
					if(index<0){
						index=3;
					}
					$(".pic img").fadeOut(1000);
					$(".pic img").eq(index).fadeIn(1000);
					$("#ulObj li").css("background-color","lightskyblue");
					$("#ulObj li").eq(index).css("background-color","white");
				});
				//点击下面的小圆圈显示对应的图片
				$("#ulObj li").click(function(){
					//获得被点击的li元素的索引值
					index=$("#ulObj li").index(this);
					$("#ulObj li").css("background-color","lightskyblue");
					$("#ulObj li").eq(index).css("background-color","white");
					//alert(index);
					$(".pic img").fadeOut(1000);
					$(".pic img").eq(index).fadeIn(1000);
				});	
		});
		</script>

大功告成！不懂就留言，在线讲解！

来源：CSDN

作者：努力刻苦的樊同学

链接：https://blog.csdn.net/weixin_44001965/article/details/94732266