Home >Web Front-end >JS Tutorial >Simple implementation of js click event carousel chart

Simple implementation of js click event carousel chart

高洛峰Original: 2017-01-21 09:32:291270browse

Carousel images are still relatively common in future applications and do not require many lines of code to implement. But when you only master the basic knowledge of js, how can you use fewer and logically simple methods to achieve it? Let’s analyze several different approaches:

1. Use the displacement method to achieve

First, we can add a div to the body and set the width to a percentage (adaptive page ), if the ratio is specific to whose percentage, it will be done according to the needs, I won’t go into details here. Put the image into a div.

Secondly, in the style part, set all img tags to absolute; to facilitate positioning

Finally, the js part talks about the logic, defining two empty arrays, the first array is used to save the initial The pictures displayed on the page and the pictures waiting to enter, the second array saves the remaining n pictures, assuming that these two arrays are set to: waitToShow=[]; and goOut=[]; waitToShow.shift(); pops up the first If a picture is named showFirst, and the displacement and movement time are set for the showFirst picture, after the execution is completed, showFirst is placed at the end of goOut: goOut.push(showFirst); At this time, the 0th element of the waitToShow array becomes the original second A picture to be displayed, set the displacement and movement time for waitToShow[0] of this picture, and pop up the first element picture of the goOut array, and put it at the end of the waitToShow array to ensure that the waitToShow array is always a displayed picture and a waiting picture. The pictures displayed, thus forming a loop through two arrays to complete the implementation of the carousel picture. The reverse logic is the same (not recommended here because the logic is too complicated)

2. Use the level of the hierarchy to change the top image (this method has no displacement action, but the logic is very simple. Very practical)

Come directly to the code for a more intuitive point: basically every line has a comment

<!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>

The above must-read js basic article (simple implementation of click event carousel chart) is the editor I have shared all the content with you, I hope it can give you a reference, and I also hope you will support the PHP Chinese website.

For more related articles on the simple implementation of js click event carousel chart, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief analysis of the understanding of functions in JSNext article：A brief analysis of the understanding of functions in JS

See more

Simple implementation of js click event carousel chart

Related articles