js 클릭 이벤트 캐러셀 차트의 간단한 구현-JS 튜토리얼-php.cn

js 클릭 이벤트 캐러셀 차트의 간단한 구현

高洛峰

풀어 주다： 2017-01-21 09:32:29

원래의

1267명이 탐색했습니다.

캐러셀 이미지는 향후 애플리케이션에서 여전히 비교적 일반적이며 구현하는 데 많은 코드 줄이 필요하지 않습니다. 하지만 js의 기본 지식만 마스터하면 이를 달성하기 위해 더 적고 논리적으로 간단한 방법을 어떻게 사용할 수 있습니까? 여러 가지 접근 방식을 분석해 보겠습니다.

을 달성하기 위해 변위 방법을 사용합니다. 먼저, 본문에 div를 추가하고 너비를 백분율(적응형 페이지)로 설정할 수 있습니다. 비율은 누구의 비율에 따라 결정되며 필요에 따라 수행됩니다. 여기서는 자세히 설명하지 않겠습니다. 이미지를 div에 넣습니다.

두 번째로, 스타일 부분에서 위치 지정을 용이하게 하기 위해 모든 img 태그를 절대값으로 설정합니다.

마지막으로 js 부분은 논리에 대해 설명하고 첫 번째 배열을 사용합니다. 초기 페이지에 표시된 사진과 입력 대기 중인 사진을 저장합니다. 두 번째 배열은 이 두 배열이 다음과 같이 설정되어 있다고 가정하여 나머지 n개의 사진을 저장합니다. waitToShow=[] 및 goOut=[]; ; 첫 번째 팝업이 표시됩니다. showFirst 그림에 대해 변위 및 이동 시간이 설정되어 있으면 실행이 완료된 후 showFirst가 goOut의 끝에 배치됩니다. goOut.push(showFirst); , waitToShow 배열의 0번째 요소는 표시할 원래 두 번째 A 그림이 되며, 이 그림의 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>
<div 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="" />
</div>
<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(&#39;img&#39;);
var butLeft = document.getElementById(&#39;butLeft&#39;);
var butRight = document.getElementById(&#39;butRight&#39;);
//获取变量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>

로그인 후 복사

위의 필수 읽기 js 기본 기사(클릭 이벤트 캐러셀 차트의 간단한 구현) )는 모든 콘텐츠를 귀하와 공유했습니다. 더 많은 JS 클릭 이벤트 회전식 다이어그램 간단한 구현 및 관련 기사를 보려면 PHP 중국 웹 사이트에주의를 기울이십시오!