캐러셀 이미지는 향후 애플리케이션에서 여전히 비교적 일반적이며 구현하는 데 많은 코드 줄이 필요하지 않습니다. 하지만 js의 기본 지식만 마스터하면 이를 달성하기 위해 더 적고 논리적으로 간단한 방법을 어떻게 사용할 수 있습니까? 여러 가지 접근 방식을 분석해 보겠습니다.
1.
을 달성하기 위해 변위 방법을 사용합니다. 먼저 본문에 p를 추가하고 너비를 백분율(적응 페이지)로 설정할 수 있으며 비율은 누구에 대해 상대적입니다. 비율에 따라 필요에 따라 수행할 수 있으므로 여기서는 자세히 설명하지 않겠습니다. 그림을 p에 넣으세요.
두 번째로, 스타일 부분에서 위치 지정을 용이하게 하기 위해 모든 img 태그를 절대값으로 설정합니다.
마지막으로 js 부분은 논리에 대해 설명하고 두 개의 빈 배열을 정의합니다. 첫 번째 배열은 페이지에 표시되는 초기 이미지를 저장하는 데 사용됩니다. 항목을 기다리고 두 번째 배열은 나머지 n개의 사진을 저장합니다. waitToShow=[]; 및 goOut=[]; showFirst라는 이름을 가지며, showFirst 그림에 대한 변위 및 이동 시간을 설정합니다. 실행이 완료된 후 showFirst는 goOut의 끝에 배치됩니다. goOut.push(showFirst); 이때 waitToShow 배열의 0번째 요소는 다음과 같습니다. 표시할 원래 두 번째 그림은 waitToShow[0]에 변위 및 이동 시간을 설정하고 goOut 배열의 첫 번째 요소 그림을 표시하고 waitToShow 배열의 끝에 배치합니다. 항상 표시되는 그림과 표시할 그림이므로 두 개의 배열을 통해 루프를 형성하여 회전형 차트의 구현을 완료합니다. 반대 논리도 동일합니다(여기서는 논리가 너무 복잡하기 때문에 권장하지 않습니다)
2. 계층 구조 수준을 사용하여 상단 이미지를 변경합니다
더 직관적인 점을 위해 코드로 직접 이동합니다. 기본적으로 모든 줄에는 댓글
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图 (闪现 自适应)</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 60%;
background: red;
margin: auto;
position: relative;
}
.wrap img {
width: 100%;
position: absolute;
/*z-index: 10;*/
}
input {
border: 1px solid lightgray;
width: 50px;
height: 30px;
background: red;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<p class="wrap">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
</p>
<input type="button" id="butLeft" name="name" value="◀︎">
<input type="button" id="butRight" name="name" value="▶︎">
</body>
<script type="text/javascript">
// 获取images元素生成字符串数组，字符串数组不能进行push pop splice 等操作
// 所以要将它的值重新存放进一个数组中，后面有定义
var images = document.getElementsByTagName('img');
var butLeft = document.getElementById('butLeft');
var butRight = document.getElementById('butRight');
//获取变量index 用来为后面设置层级用
var index = 1000;
// 获取一个空的数组，用来存放images里面的字符串元素
var imagess = [];
// for循环用来给imagess数组赋值，并且改变数组中的元素的层级
for (var i = 0; i < images.length; i++) {
imagess[i] = images[i];
var currentImage = imagess[i];
// 当前图片的层级的设置，一轮for循环都为他们设置了初始的zIndex，图片越靠前，层级设置
// 要求越高，所以用的是－i,这样图片会按顺序从第一张，第二张.....依次向下
currentImage.style.zIndex = -i;
}
// 设置计数器count，执行一次点击事件（向左或者向右）count加1
var count = 0;
// 向左的点击事件
butLeft.onclick = function() {
// 从数组头部弹出一个图片元素
var showFirst = imagess.shift();
// 给弹出的这个图片元素设置层级，即 －1000+count，
// 让层级相较其他元素是最小的，数组头部弹出的图片会显示在最底层
showFirst.style.zIndex = - index + count;
// 层级改变完成后再将他push进数组的尾部
imagess.push(showFirst);
// 点击一次加1，不用考虑具体的值，只需要有点击事件加 1
count++;
}
// 向右点击事件
butRight.onclick = function() {
// 从imagess的尾部弹出一个元素，并赋值给showFirst
var showFirst = imagess.pop();
// 设置showFirst的层级为最大，1000+count ，这样他会显示在第一层
showFirst.style.zIndex = index + count;
// 层级改变之后将他在插入数组imagess的头部
imagess.unshift(showFirst);
// 点击一次加1
count++;
}
</script>
</html>위 내용은 계층적 수준을 사용하여 이미지 변경을 구현하기 위해 자바스크립트를 사용하는 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
