JS创作轮播图

最新推荐文章于 2024-09-24 10:50:41 发布

_语义错误

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量260

点赞数

分类专栏： JavaScript 文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_66451927/article/details/125574190

版权

本文介绍了如何使用JavaScript实现轮播图，包括轮播图界面的构建、点击按钮切换图片的功能，以及通过引入tools.js来实现平滑的图片滑动动画效果。在自动切换图片时，还特别处理了点击时跳转到指定图片的功能，并确保了在点击完成后能恢复自动切换。

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

一、轮播图界面

轮播图界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			/* 设置outer */
			*{
				margin: 0;
				padding: 0;
			}
			/* 
				设置#outer ul的样式
			 */
			#outer{
				width: 220px;
				height: 200px;
				/* 居中 */
				margin: 50px auto;
				background-color: greenyellow;
				padding: 10px 0;
				/* 开启相对定位 */
				position: relative;
				/* 裁剪溢出内容 */
				overflow: hidden;
			}
			
			/* 设置imgList */
			#imgList{
				/* 去除项目符号（li前的点）*/
				list-style: none;
				/* 设置ul宽度 */
				/* 图片宽度200+左右外边距20 */
				/* width: 1320px; */
				/* 定位如果写死了图片数量改变imgList宽度不能随之改变不好，注释掉宽度，用Js里的 */
				
				/* 开启绝对定位 */
				position: absolute;
				
				/* 设置偏移量 */
				/* 
					每向左移动220px，就会显示到下一张图片
				 */
				left: -220px;
				
			}
			
			/* 设置图片中的li */
			#imgList li{
				/* 浮动 */
				float: left;
				/* 设置左右外边距 */
				margin: 0 10px;
			}
			
			/* 设置导航按钮 */
			#navDiv{
				position: absolute;
				/* 设置位置 */
				bottom:15px;
				/* 设置left的值
				 outer宽度220
				 navDiv宽度 25*5=125
					220-125=95 95/2=47.5
				 */
				/* left: 47px; */
				/* 同样不要写死，用js */
			}
			#navDiv a{
				float: left;
				width: 10px;
				height: 10px;
				background-color:red ;
				margin:0 5px;
				/* 透明效果 */
				opacity: 0.5;
				/* 兼容IE8透明 */
				filter: alpha(opacity = 50);
			}
			/* 设置鼠标移入效果 */
			#navDiv a:hover{
				background-color: black;
			}
			
		</style>
		<script>
			window.onload = function(){
				// 设置imgList宽高
				// 获取imgList
				var imgList = document.getElementById("imgList");