JSクリックイベントカルーセルチャートの簡単な実装-jsチュートリアル-php.cn

JSクリックイベントカルーセルチャートの簡単な実装

高洛峰

リリース： 2017-01-21 09:32:29

オリジナル

1266 人が閲覧しました

カルーセル画像は将来のアプリケーションでも比較的一般的であり、実装するために多くのコード行を必要としません。しかし、js の基本的な知識だけを習得した場合、より少ない論理的に単純な方法を使用してそれを達成するにはどうすればよいでしょうか?いくつかの異なる方法を分析してみましょう:

1. ディスプレイスメント方法を使用して、それを実現します

まず、本文に div を追加し、幅をパーセンテージに設定します (アダプティブページ)。割合はニーズによって異なりますので、ここでは詳しく説明しません。画像をdivに入れます。

次に、スタイル部分で、位置決めを容易にするためにすべての img タグを絶対に設定します

最後に、js 部分でロジックについて説明し、最初の配列はページに表示される初期画像を保存するために使用されます。 2 番目の配列が次のように設定されているとします。 waitToShow=[];これは showFirst という名前で、showFirst ピクチャの移動時間と移動時間を設定します。実行が完了すると、showFirst が goOut の最後に配置されます。このとき、waitToShow 配列の 0 番目の要素が配置されます。表示される元の 2 番目の画像になります。 waitToShow[0] で変位と移動時間を設定し、goOut 配列の最初の要素画像をポップアウトし、waitToShow が確実に実行されるように waitToShow 配列の最後に置きます。配列は常に表示される画像と表示される画像であるため、2 つの配列によってループが形成され、カルーセルチャートの実装が完了します。逆のロジックも同じです (ロジックが複雑すぎるため、ここではお勧めしません)

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 基本記事 (クリックイベントカルーセルチャートの簡単な実装) は、編集者があなたと共有したすべての内容です。参考にしていただければ幸いです。PHP 中国語 Web サイトを皆さんにサポートしていただければ幸いです。

js クリックイベントカルーセルチャートの簡単な実装に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。