jQuery实现轮播图

最新推荐文章于 2023-09-14 18:36:20 发布

懒羊羊♛

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量92

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： js javascript jquery html

本文链接：https://blog.csdn.net/weixin_46596213/article/details/112056807

版权

HTML+CSS+JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

话不多说：看代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<style type="text/css">
			/*.grid{
				position: absolute;
				width: 100%;
				height: 100%;
				background: lawngreen;
			}*/
			/*相对定位是相对于自身而言的：*/
			
			#div_button {
				position: relative;
				left: 100px;
			}
			/*被选中的按钮的颜色*/
			.btn{
				background-color: orange;
			}
			
		</style>
		<!--引入jquery文件-->
		<script type="text/javascript" src="js/jquery-1.11.1.min.js">
		</script>
		<script type="text/javascript">
			var arrays = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
			$(function() {
				//向div_banner中添加一个p标签
				//$("#div_banner").html("<p>今天跨年夜</p>")
				//向id为div_banner中添加一张图片
				//$("#div_banner").html("<img src='img/1.jpg'/>");
				
				for(var i = 0; i < arrays.length; i++) {
					//如果是html的话就是覆盖，如果是append就是累加
					//					$("#div_banner").html("<img src='"+arrays[i]+"'>");
					//图片
					$("#div_banner").append("<img src='" + arrays[i] + "'>");
					//按钮
					$("#div_button").append("<input type='button' value='" + (i + 1) + "' />")
				}
				$("#div_banner img").hide().eq(0).show();
				//默认添加样式
				$("#div_button input[type='button']").eq(0).addClass("btn");
				//按钮的点击事件
				$("#div_button input[type='button']").click(function() {
					 index = parseInt(this.value) - 1;
					//隐藏所有id名为div_banner下的所有img
					//jquery支持连缀抒写
					//				$("#div_banner img").hide();
					//eq()就是根据下标选择对象
					//				$("#div_banner img").hide().eq();
					$("#div_banner img").hide().eq(index).show();
					//给当前按钮添加一个样式，其他按钮则移除该样式
					$(this).addClass("btn").siblings().removeClass("btn");
				});
			});
			var index=1;
			setInterval(changeImg,2000);
			function changeImg(){
				//图片
				$("#div_banner img").hide().eq(index).show();
				//按钮
				$("#div_button input[type='button']").eq(index).addClass("btn").siblings().removeClass("btn");
				index++;
				if(index>=arrays.length){
					index=0;
				}
			}
		</script>
	</head>

	<body>
		<!--第一个div放图片-->
		<div id="div_banner">
			<!--<img src="img/1.jpg"/>
			<img src="img/2.jpg"/>
			<img src="img/3.jpg"/>
			<img src="img/4.jpg"/>
			<img src="img/5.jpg"/>-->

		</div>
		<!--第二个div放按钮-->
		<div id="div_button">
			<!--<input type="button" value="1" />
			<input type="button" value="2"/>
			<input type="button" value="3"/>
			<input type="button" value="4"/>
			<input type="button" value="5"/>-->
		</div>
		<!--<div class="grid"></div>-->
	</body>

</html>

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

懒羊羊♛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现轮播图

话不多说：看代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>轮播图</title> <style type="text/css"> /*.grid{ position: absolute; width: 100%; height: 100%; background: lawngreen;
复制链接

扫一扫