ホームページ > 記事 > ウェブフロントエンド > JSでカルーセル効果を実現する方法
JSでカルーセル効果を実現する方法
- 零到壹度オリジナル
- 2018-04-12 16:03:011916ブラウズ
この記事の内容は、js でカルーセル効果を実現する方法を共有することです。必要な友人はそれを参照できます。
シームレスな例は次のとおりです。やったのは要素の左の値を変更して画像を左右にスクロールさせることです。
まず p+css の構造スタイルを見てみましょう: 
p+css コード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
/*消除图片底部3像素距离*/
img{
vertical-align: top;
}
.scroll{
width: 500px;
height: 200px;
margin: 100px auto;
border: 1px solid #ccc;
padding: 7px;
overflow: hidden;
position: relative;
}
.box{
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.box ul{
width: 600%;
position: absolute;
left: 0;
top: 0;
}
.box ul li{
float: left;
}
.scroll ol{
position: absolute;
right: 10px;
bottom: 10px;
}
.scroll ol li{
float: left;
width: 20px;
height: 20px;
background: pink;
text-align: center;
line-height: 20px;
border-radius: 50%;
background-color: pink;
margin-left:10px ;
cursor: pointer; }
.scroll ol li.current{
background-color: purple; }
</style>
</head>
<body>
<p id="scroll" class="scroll">
<p id="box" class="box">
<ul id="ul">
<li><img src="images/1.jpg" style="max-width:90%" style="max-width:90%" alt="JSでカルーセル効果を実現する方法" ></li>
<li><img src="images/2.jpg" style="max-width:90%" style="max-width:90%" alt="JSでカルーセル効果を実現する方法" ></li>
<li><img src="images/3.jpg" style="max-width:90%" style="max-width:90%" alt="JSでカルーセル効果を実現する方法" ></li>
<li><img src="images/4.jpg" style="max-width:90%" style="max-width:90%" alt="JSでカルーセル効果を実現する方法" ></li>
<li><img src="images/5.jpg" style="max-width:90%" style="max-width:90%" alt="JSでカルーセル効果を実現する方法" ></li>
</ul>
<ol id="ol">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</p>
</p>
</body></html> 表示効果は図に示すとおりです: 
次に js コードを追加する必要があります。
その前に理解する必要があります。小さなドット 1 2 3 はハードコードされておらず、ul li の画像の数に基づいて決定されるため、まず p の ol li のコードを削除する必要があります
シームレスなスクロールを実現するには、次のものが必要ですつまり、最初の画像を複製して最後に置きます。このとき、CSSのレイアウトは保持され、pだけが残ります:
<body>
<p id="scroll" class="scroll">
<p id="box" class="box">
<ul id="ul">
<li><img src="images/1.jpg" style="max-width:90%" style="max-width:90%" alt="JSでカルーセル効果を実現する方法" ></li>
<li><img src="images/2.jpg" style="max-width:90%" style="max-width:90%" alt="JSでカルーセル効果を実現する方法" ></li>
<li><img src="images/3.jpg" style="max-width:90%" style="max-width:90%" alt="JSでカルーセル効果を実現する方法" ></li>
<li><img src="images/4.jpg" style="max-width:90%" style="max-width:90%" alt="JSでカルーセル効果を実現する方法" ></li>
<li><img src="images/5.jpg" style="max-width:90%" style="max-width:90%" alt="JSでカルーセル効果を実現する方法" ></li>
</ul>
</p>
</p>
</body>このとき、jsコードを使用して小さなドットを生成します
var scroll = document.getElementById("scroll"); // 获得大盒子
var ul = document.getElementById("ul"); // 获得ul
var ulLis = ul.children;// 获得ul的盒子 以此来生成ol中li的个数
var liWidth = ul.children[0].offsetWidth;// 获得每个li的宽度
// 操作元素
// 因为要做无缝滚动，所以要克隆第一张，放到最后一张后面
// 1. 克隆元素
ul.appendChild(ul.children[0].cloneNode(true)); // 2.创建ol 和li
vaar ol = document.createElement("ol");//创建ol元素
scroll.appendChild(ol);// 把ol放到scroll盒子里面去
for (var i=0;i<ulLis.length-1;i++) { var li = document.createElement("li");// 创建li元素
li.innerHTML = i + 1;// 给li里面添加文字 1 2 3 4 5
ol.appendChild(li);// 将li元素添加到ol里面
}
ol.children[0].className = "current";// ol中的第一个li背景色为purpleこのとき、小さなドットであるol li要素が作成され、そして、js を使用してアニメーション化します
アニメーション部分には以下が含まれます:
1. マウスがどの小さなドットの上を通過しても、どの画像が表示され、その小さなドットの色も変わります
2. 画像は自動的に回転します。タイマーが必要です)
3. マウスが画像の上を通過すると、画像の再生が自動的に停止します (これにはタイマーをクリアする必要があります)
4. マウスが画像から離れると、画像は自動的に回転し続けます (タイマーを再起動します)
こちらanimate() アニメーション関数をカプセル化します
// 动画函数 第一个参数，代表谁动 第二个参数 动多少
// 让图片做匀速运动，匀速动画的原理是 当前的位置 + 速度 即 offsetLeft + speed
function animate(obj,target){
// 首先清除掉定时器
clearInterval(obj.timer); // 用来判断 是+ 还是 - 即说明向左走还是向右走
var speed = obj.offsetLeft < target ? 15 : -15;
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;//它们的差值不会超过speed
obj.style.left = obj.offsetLeft + speed + "px"; // 有可能有小数的存在，所以在这里要做个判断
if (Math.abs(result) <= Math.abs(speed)) {
clearInterval(obj.timer);
obj.style.left = target + "px";
}
},10);
}タイマー関数
var timer = null; // 轮播图的定时器
var key = 0;// 控制播放的张数
var circle = 0;// 控制小圆点
timer = setInterval(autoplay,1000);// 自动轮播
function autoplay(){
/*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,
就要重头开始播放. 因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/
key++; // 先++
if(key > ulLis.length-1){// 后判断
ul.style.left = 0; // 迅速调回
key = 1; // 因为第6张是第一张，所以播放的时候是从第2张开始播放
} // 动画部分
animate(ul,-key*liWidth); // 小圆点circle 当显示第几张图片是，对应的小圆点的颜色也发生变化
/*同理,对小圆点也要有一个判断*/
circle++; if (circle > olLis.length-1) {
circle = 0;
} // 小圆点颜色发生变化
for (var i = 0 ; i < olLis.length;i++) { // 先清除掉所用的小圆点类名
olLis[i].className = "";
} // 给当前的小圆点 添加一个类名
olLis[circle].className = "current";
}さて、ここでメインコード、特定のコードを示します。カルーセル効果を実現するために js をダウンロードするにはここをチェックしてください
以上がJSでカルーセル効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。