轮播图怎么写？

最新推荐文章于 2024-04-15 10:28:24 发布

喵呜.

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量827

点赞数

文章标签： jquery js css html

本文链接：https://blog.csdn.net/siqiwang/article/details/111500809

版权

文章目录

轮播图

轮播图

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#box{
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
			#box img{
				position: absolute;
			}
			#box:first-child{
				display: block;
			}
			.page>li{
				width: 20px;
				height: 20px;
				border-radius: 50%;
				border: 1px solid red;
				text-align: center;
				float: left;
			}
			.page{
				width: 300px;
				display: flex;
				justify-content: space-between;
			}
			.active{
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/1.jpg" alt="" />
			<img src="img/2.jpg" alt="" />
			<img src="img/3.jpg" alt="" />
			<img src="img/4.jpg" alt="" />
		</div>
		<ul class="page">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<button id="prev">上一张</button>
		<button id="next">下一张</button>
		
		
		<script>
		//移动方法
		var index=0;
		function move(){
			index++;
			if(index>=$("#box img").length){
				index=0;
			}
			$("#box img").eq(index).show().siblings().hide();
			$(".page li").eq(index).addClass("active").siblings().removeClass("active");
			
		}
		//每隔两秒轮播
		var t=setInterval(move,2000);
		
		//鼠标移入停止--移除 继续
		$("#box").hover(function(){
			clearInterval(t);
		},function(){
			t=setInterval(move,2000);
		})
		
		//第几张
		$(".page li").click(function(){
			//clearInterval(t);
			index=$(this).index();
			$("#box img").eq(index).show().siblings().hide();
			$(".page li").eq(index).addClass("active").siblings().removeClass("active");
		})
		
		//下一张
		$("#next").click(function(){
			move();
		})
		
		//上一张
		$("#prev").click(function(){
			index--;
			if(index<0){
				index=$("#box img").length-1;
			}
			$("#box img").eq(index).show().siblings().hide();
			$(".page li").eq(index).addClass("active").siblings().removeClass("active");
		
		})
		</script>
	</body>
	
	
</html>

喵呜.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图怎么写？

文章目录轮播图轮播图代码如下（示例）：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-3.5.1.js"></script> <style type="text/css"> *{ margin: 0; padding: 0;.
复制链接

扫一扫