JQuery实现圆点轮播图自动播放

最新推荐文章于 2022-11-07 11:18:08 发布

passerby&

最新推荐文章于 2022-11-07 11:18:08 发布

阅读量1.5k

点赞数 1

分类专栏： JQuery知识点专栏文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_46100493/article/details/124666612

版权

JQuery知识点专栏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用jquery实现轮播图

实现之后的效果

在这里插入图片描述

实现思路

1，每次只显示一张图片其他的图片隐藏起来
2，每一次轮播相应位置的小圆点跟着变色
3，鼠标移入小圆点时显示相应的图片

源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.min.js"></script>
		<style>
		*{
		margin:0;
		padding:0;
		}
		li{
			list-style: none;  //这一步很重要
		}
			#container{
				width:900px;
				height:400px;
				position:relative;
				overflow:hidden;
				border-radius:10px;
			}
			.item{
				position:absolute;
			}
			 
			#tabs{
				position:absolute;
				left:300px;
				bottom:20px;
			}
			.tab{
				float:left;
				margin-right:10px;
				width:6px;
				height:6px;
				border:3px solid #FFFFFF;
				border-radius:50%;
				background:#fff;
				cursor:pointer;
			}
			.active{
				background:#4774B6 ;
				border-color:#4774B6 ;
			}
			.btn{
				position:absolute;
				top:50%;
				margin-top:-35px;
				width:40px;
				height:70px;
				color:#d6d3d5;
				font-size:36px;
				line-height:70px;
				text-align:center;
				cursor:pointer;
			}
			.btn:hover{
				background:rgba(127,120,125,0.8);
			}
			.prev{
				position:absolute;
				left:235px;
				border-radius:0 5px 5px 0;	
			}
			.next{
				position:absolute;
				right:0;
				border-radius:5px 0 0 5px;
			}
		</style>
	</head>
	<body>
		<div id="container">
		            <a class="item" href="#"><img src="images/banner1.jpg"/></a>
		            <a class="item" href="#"><img src="images/banner2.jpg"/></a>
		            <a class="item" href="#"><img src="images/banner3.jpg"/></a>
		            <a class="item" href="#"><img src="images/banner4.jpg"/></a>
		            <a class="item" href="#"><img src="images/banner5.jpg"/></a>
		            <ul id="tabs">
		              <li class="tab active"></li>
		              <li class="tab"></li>
		              <li class="tab"></li>
		              <li class="tab"></li>
		              <li class="tab"></li>
		            </ul>
		</div>
	</body>
	<script>
		$(document).ready(function(){
		   var i = 0 ;
		   var timer;
		  //用jquery方法设置第一张图片显示，其余隐藏
		  $('.item').eq(0).show().siblings('.item').hide();
		  //调用showTime()函数（轮播函数）
		  showTime(); 
		  //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
		  $('.tab').hover(function(){
		    //获取当前i的值，并显示，同时还要清除定时器
		    i = $(this).index();
		    Show();
		    clearInterval(timer);
		  },function(){
		    showTime();
		  });
		  //定时器
		  timer = setInterval(function(){
		    //调用一个Show()函数
		    Show();
		    i++;
		    //当图片是最后一张的后面时，设置图片为第一张
		    if(i==5){
		      i=0;
		    }
		  },1000);   //这里设置每张图片的轮播时间间隔
		}
		//创建一个Show函数
		function Show(){
		  //在这里可以用其他jquery的动画
		  $('.item').eq(i).fadeIn(300).siblings('.item').fadeOut(300);
		   
		  //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
		  $('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active');   
		} 
		});
	</script>
</html>

问题答疑

如果出现运行时没有轮播效果记得检查自己是否引用js文件到位
如果出现没有图片就检查图片的路径是否写对
页面轮播时想更换小圆点的颜色只需要更改相对应的css属性即可

passerby&

关注

1
点赞
踩
23

收藏

觉得还不错? 一键收藏
3
评论
JQuery实现圆点轮播图自动播放

jquery实现轮播图，小圆点，自动轮播
复制链接

扫一扫

专栏目录