jquery实现轮播图

最新推荐文章于 2023-12-17 20:26:26 发布

人间巳时

最新推荐文章于 2023-12-17 20:26:26 发布

阅读量240

点赞数

分类专栏：前端框架jquery 文章标签：轮播图·

本文链接：https://blog.csdn.net/Shiny__boy/article/details/98656129

版权

前端框架jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

轮播图自动播放，鼠标悬停选择对应图片

效果图如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			#ad{
				width: 590px;
				height: 470px;
				border: 10px  solid red;
				margin: 5px auto;
			}
			#nav{ /* 圆点定位 */
				position: relative;
				left: 400px;
				top:-50px;
			}
			#nav span{ /* 圆点样式 */
				width: 10px;
				height: 10px;
				border: 1px solid #fff;
				border-radius: 5px;
				display: block;
				float: left;
				margin: 0px 5px;
			}
			#nav span:first-child{
				background-color: #ffffff;/* 加载完毕页面时,使第一个小圆点显示白色 */
			}
			#nav span:hover{
				background-color: #FFFFFF;
			}
			
		</style>
		<script src="js/jquery1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var t;//全局变量,使时钟停下
			var arr=["1.jpg.webp","2.jpg.webp","3.jpg.webp","4.jpg","5.jpg.webp","6.jpg.webp","7.jpg.webp","8.jpg.webp"];//图片数组
			$(function(){
				t=window.setInterval(changeimg,3000);//时钟,进行周期性切换
				$("#ad").hover(function(){//鼠标悬停在圆点上时结束时钟
					window.clearInterval(t);
				},function(){ //从小圆点上移走时,时钟继续
					t=window.setInterval(changeimg,1000);
				});
				
				$("#nav span").mousemove(function(){ //鼠标停留在小圆点上时改变图片
					var i=$(this).index("#nav span");
					index=i-1;
					changeimg();
				})
			});
			
			var index=0;//全局变量,用来记录下标
			function changeimg(){
				index++;
				if(index>arr.length-1){
					index=0;
				}
				$("#ad img").attr("src","image/"+arr[index]);//加载图片
				$("#nav span").eq(index).siblings().css("background-color","transparent");//之外的圆点为透明
				$("#nav span").eq(index).css("background-color","#ffffff");//鼠标hover当前圆点为白色
			}
		</script>
	</head>
	<body>
		<div id="ad">
			<img src="image/1.jpg.webp" >
			
			<div id="nav"><!-- 显示小圆点 -->
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>
</html>