利用js实现轮播图

最新推荐文章于 2022-09-06 09:15:46 发布

3AM_

最新推荐文章于 2022-09-06 09:15:46 发布

阅读量174

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_54139195/article/details/126185128

版权

这篇博客展示了如何利用JavaScript实现一个图片轮播功能，包括设置CSS样式、JavaScript事件处理以及动态改变图片位置的动画效果。代码中详细解释了每个部分的作用，包括图片容器的定位、导航按钮的布局以及自动轮播的实现。通过点击导航按钮或自动切换，用户可以浏览一系列图片。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<style type="text/css">
			#active {
				width: 520px;
				height: 350px;
				margin: 50px auto;
				background-color: greenyellow;
				padding: 10px 0;
				position: relative;
				/* 裁剪溢出内容 */
				overflow: hidden;
			}

			#active img {
				width: 500px;
				height: 350px;

			}

			#imgs {
				position: absolute;
				/* 设置向左移动的距离 */
				left: 0px;

			}

			#imgs li {
				float: left;
				margin: 0 10px;
			}

			#nav {
				position: absolute;
				bottom: 20px;
				/* left: 190px; */
				
			}

			#nav a {
				float: left;
				width: 10px;
				height: 10px;
				background-color: deepskyblue;
				margin: 0 5px;
				opacity: 0.5;
				border-radius: 50%;

			}

			#nav a:hover {
				background-color: yellow;
			}
		</style>
		<script type="text/javascript" src="tools.js">

		</script>


		<script type="text/javascript">
			// 写在window.onload=function(){}里面的内容，需要等整个页面加载完成的之后，才执行。
			window.onload = function() {
				// 获取imgs的内容
				var imgs = document.getElementById("imgs");
				// 获取页面中所有的img标签
				var imgz = document.getElementsByTagName("img");
				// 设置ul的宽度
				imgs.style.width = 520 * imgz.length + "px";
				// 设置导航按钮居中


				// 获取nav
				var nav = document.getElementById("nav");
				// 获取active
				var active = document.getElementById("active");
				// 设置nav left的值
				// （获取active的宽度）active.offsetWidth
				// （获取nav的宽度）nav.offsetWidth
				// (active.offsetWidth-nav.offsetWidth)active剩余宽度
				nav.style.left = (active.offsetWidth - nav.offsetWidth) / 2 + "px";
				// 默认显示图片的索引
				var index = 0;
				// 获取所有的a标签
				var allA = document.getElementsByTagName("a");
				// 设置默认选中a的效果
				allA[index].style.backgroundColor = "yellow";


				// 点击超链接a切换到指定图片 
				// 点击第一个a切换到第一张照片
				// 点击第n个a切换到第n张照片

				// 遍历所有的a 为所有的超链接a绑定单击响应函数
				for (var i = 0; i < allA.length; i++) {
					// 为每一个超链接添加一个编号（num属性）
					allA[i].num = i;
					// 为超链接a绑定单击响应函数
					allA[i].onclick = function() {
						// 获取点击超链接的索引,并且设置成与图片保持一致
						index = this.num;
						// 切换图片q
						// imgs.style.left = -520 * index + "px";
						// 设置选中的a
						strA();
						move(imgs, "left", -520 * index , 20, function() {

						});

					};
				}
				
				hhr();
				// 设置选中的a

				function strA() {
					if (index>=imgz.length-1) {
						index=0;
						imgs.style.left=0;
					}
					// 遍历所有的a 将所有的a设置成蓝色
					for (var i = 0; i < allA.length; i++) {
						//内联样式优先级高
						allA[i].style.backgroundColor = "";
					}
					// 将选中的a设置成黄色
					allA[index].style.backgroundColor = "yellow";
				}
				function hhr(){
					setInterval(function(){
						index++;
						index%=imgz.length;
						move(imgs,"left",-520*index,20,function(){
							strA();
						});
					},2000)
				}
			};
		</script>
	</head>
	<body>
		<div id="active">
			<ul id="imgs">
				<li><img src="img/3.png"></li>
				<li><img src="img/4.png"></li>
				<li><img src="img/5.png"></li>
				<li><img src="img/3.png"></li>
				<li><img src="img/4.png"></li>
				<li><img src="img/5.png"></li>
				<li><img src="img/3.png"></li>

			</ul>
			<div id="nav">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>