JSでスライディングカルーセル画像を実装するにはどうすればよいですか?
この記事では主に左から右へのスライディングカルーセル効果のjs実装を詳しく紹介します。興味のある方は参考にしてください
カルーセルは数秒ごとに画像を自動的にスライドさせて実現します。画像が順番に再生される効果。効果に関しては、カルーセルはスライド式または段階的に行うことができます。スライド式カルーセルは、画像が左から右にスライドする効果です。段階的なカルーセルは、透明度に基づいて画像が徐々に表示される効果です。一つ目の効果を得る方法です。
原則
同じサイズの画像は列に結合されますが、1つの画像のみが表示され、残りは非表示になります。左の値を変更することで、表示される画像を変更します。
クリックして効果を表示
html部分
navはコンテナ全体、最初のULリスト #indexは小さなドットのリストで、マウスで覆われたドットがどの画像を表示します, on 小さなドットに背景色属性を追加するクラスです。2 番目の ul list #img は画像のリストです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Figure</title>
<link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<!--从左向右滑动-->
<nav>
<ul id="index">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="img">
<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>CSSパート
画像サイズは720*405です。ここでは次の点に注意する必要があります:
ul#imgリストはnavに対して絶対位置、長さは#img を設定する必要があります。これは、写真を並べて表示できるようにするための、すべての写真の合計幅です。
合計コンテナー ナビゲーションの幅は、写真の幅 720px、つまり 1 つだけ設定する必要があります。画像を表示でき、幅を超えた部分は非表示になります。つまり、overflow: hidden
画像リストに小さなドットのリストが表示されるはずなので、#img の z-index を -1 に設定します。小さなドットのリストは、境界線のスタイルを変更することで一連のliで構成されているため、背景色を変更するだけで小さなドットを移動する効果を得ることができます。
*{
margin:0;
padding:0;
}
nav{
width: 720px;
height: 405px;
margin:20px auto;
overflow: hidden;
position: relative;
}
#index{
position: absolute;
left:320px;
bottom: 20px;
}
#index li{
width:8px;
height: 8px;
border: solid 1px gray;
border-radius: 100%;
background-color: #eee;
display: inline-block;
}
#img{
width: 3600px;/*不给宽高无法移动*/
height: 405px;
position: absolute;/*不定义absolute，js无法设置left和top*/
z-index: -1;
}
#img li{
width: 720px;
height: 405px;
float: left;
}
#index .on{
background-color: black;
}JSパート
絵移動関数moveElement()
moveElement関数は絵の現在位置と目標位置を取得し、その隙間を計算して移動する必要がありますが、 offsetLeft と offsetTop を使用して、画像の現在位置を取得できます。移動時に画像を「横にスワイプ」すると、距離を 10 回に分割して移動します。つまり、setTimeOut 関数を使用します。ただし、マウスのホバリングを防ぐために、clearTimeout() 関数を呼び出す必要があります。コードは次のとおりです:
function moveElement(ele,x_final,y_final,interval){//ele为元素对象
var x_pos=ele.offsetLeft;
var y_pos=ele.offsetTop;
var dist=0;
if(ele.movement){//防止悬停
clearTimeout(ele.movement);
}
if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
return;
}
dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
ele.style.left=x_pos+'px';
ele.style.top=y_pos+'px';
ele.movement=setTimeout(function(){//分10次移动，自调用10次
moveElement(ele,x_final,y_final,interval);
},interval)
}small ドット移動関数 moveIndex()
小さなドットを移動する原理は、まず設定された背景色のクラスを移動することです。どの li に背景色があるかを決定し、それを削除して、すべての li に背景がないようにして、現在の li に背景を追加します。
function moveIndex(list,num){//移动小圆点
for(var i=0;i<list.length;i++){
if(list[i].className=='on'){//清除li的背景样式
list[i].className='';
}
}
list[num].className='on';
}写真の自動カルーセル
次のコードをwindow.onloadに直接記述します。
var img=document.getElementById('img');
var list=document.getElementById('index').getElementsByTagName('li');
var index=0;//这里定义index是变量，不是属性
var nextMove=function(){//一直向右移动，最后一个之后返回
index+=1;
if(index>=list.length){
index=0;
}
moveIndex(list,index);
moveElement(img,-720*index,0,20);
};画像の自動カルーセルには setInterval() 関数の使用が必要です。これにより、プログラムは数秒ごとに nextMove() 関数を自動的に呼び出すことができます:
var play=function(){
timer=setInterval(function(){
nextMove();
},2500);
}; マウス オーバーレイの小さなドット効果
マウスで覆われた小さなドットがわかっているときに、対応する画像を表示する効果を実現するには、マウスがどの小さなドットをカバーしているかを知る必要があります。ここで、値を作成するために各 li にカスタム属性インデックスを追加します。この属性の値は、対応する小さなドットのシリアル番号 i (0~n-1、n は li の数) であるため、マウスがドットをカバーするたびに、index 属性の値を取得するだけで知ることができます。マウスがカバーする小さな点。インデックス属性は変数インデックスとは関係がなく、名前が同じであるだけであることに注意してください。
for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
list[i].index=i;//这里是设置index属性，和index变量没有任何联系
list[i].onmouseover= function () {
var clickIndex=parseInt(this.index);
moveElement(img,-720*clickIndex,0,20);
index=clickIndex;
moveIndex(list,index);
clearInterval(timer);
};
list[i].onmouseout= function () {//移开后继续轮播
play();
};
}概要
カルーセル チャートの実装は複雑ではありません。主なことは、画像の移動動作を小さなドットの移動動作から分離することです。これにより、実装が容易になります。このカルーセル画像は、実際には、最後の画像から最初の画像にスライドするときに、スライドする距離が長いという問題があります。ここで、最終的な計算は -720* に基づいています。インデックスは、画像の動きと小さなドットの動きを結び付けるものであり、スライド方法を現在の offsetLeft+ (-720) に変更します。画像の動きはインデックスに依存しません。画像:
<li><img src="../images/img1.jpg" alt="img1"></li> <li><img src="../images/img2.jpg" alt="img2"></li> <li><img src="../images/img3.jpg" alt="img3"></li> <li><img src="../images/img4.jpg" alt="img4"></li> <li><img src="../images/img5.jpg" alt="img5"></li> <li><img src="../images/img1.jpg" alt="img1"></li>
次に、最後の画像にスライドするときに、すぐにオフセットを 0 に割り当て、最初の画像に変更します。2 つの画像は同じです。変化が区別できないため、シームレスな接続が可能です。
りー
以上がJSでスライディングカルーセル画像を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7621
15
1389
52
89
11
31
136
Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?
Mar 24, 2024 am 11:27 AM
Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に
PHP プログラミング ガイド: フィボナッチ数列を実装する方法
Mar 20, 2024 pm 04:54 PM
プログラミング言語 PHP は、さまざまなプログラミング ロジックやアルゴリズムをサポートできる、Web 開発用の強力なツールです。その中でも、フィボナッチ数列の実装は、一般的で古典的なプログラミングの問題です。この記事では、PHP プログラミング言語を使用してフィボナッチ数列を実装する方法を、具体的なコード例を添付して紹介します。フィボナッチ数列は、次のように定義される数学的数列です。数列の最初と 2 番目の要素は 1 で、3 番目の要素以降、各要素の値は前の 2 つの要素の合計に等しくなります。シーケンスの最初のいくつかの要素
Huawei携帯電話にWeChatクローン機能を実装する方法
Mar 24, 2024 pm 06:03 PM
Huawei 携帯電話に WeChat クローン機能を実装する方法 ソーシャル ソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認する まず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。
Golangで正確な除算演算を実装する方法
Feb 20, 2024 pm 10:51 PM
Golang で正確な除算演算を実装することは、特に財務計算を含むシナリオや高精度の計算が必要なその他のシナリオでよくあるニーズです。 Golang の組み込みの除算演算子「/」は浮動小数点数に対して計算されるため、精度が失われる場合があります。この問題を解決するには、サードパーティのライブラリまたはカスタム関数を使用して、正確な除算演算を実装します。一般的なアプローチは、math/big パッケージの Rat タイプを使用することです。これは分数の表現を提供し、正確な除算演算を実装するために使用できます。
Golang がゲーム開発の可能性を可能にする方法をマスターする
Mar 16, 2024 pm 12:57 PM
今日のソフトウェア開発分野では、効率的で簡潔かつ同時実行性の高いプログラミング言語として、Golang (Go 言語) が開発者にますます好まれています。豊富な標準ライブラリと効率的な同時実行機能により、ゲーム開発の分野で注目を集めています。この記事では、ゲーム開発に Golang を使用する方法を検討し、具体的なコード例を通じてその強力な可能性を示します。 1. ゲーム開発における Golang の利点 Golang は静的型付け言語として、大規模なゲーム システムの構築に使用されます。
PHP ゲーム要件実装ガイド
Mar 11, 2024 am 08:45 AM
PHP ゲーム要件実装ガイド インターネットの普及と発展に伴い、Web ゲーム市場の人気はますます高まっています。多くの開発者は、PHP 言語を使用して独自の Web ゲームを開発することを望んでおり、ゲーム要件の実装は重要なステップです。この記事では、PHP 言語を使用して一般的なゲーム要件を実装する方法を紹介し、具体的なコード例を示します。 1. ゲームキャラクターの作成 Web ゲームにおいて、ゲームキャラクターは非常に重要な要素です。ゲームキャラクターの名前、レベル、経験値などの属性を定義し、これらを操作するメソッドを提供する必要があります。
ナイキシューズの靴箱の本物と偽物の見分け方（簡単に見分けるコツをマスター）
Sep 02, 2024 pm 04:11 PM
世界的に有名なスポーツブランドとして、ナイキのシューズは大きな注目を集めています。しかし、市場にはナイキの偽物の靴箱などの偽造品も多数出回っています。消費者の権利と利益を保護するには、本物の靴箱と偽物の靴箱を区別することが重要です。この記事では、本物の靴箱と偽物の靴箱を見分けるための簡単で効果的な方法をいくつか紹介します。 1: 外箱のタイトル ナイキの靴箱の外箱を観察すると、多くの微妙な違いを見つけることができます。ナイキの純正靴箱は通常、手触りが滑らかで、明らかな刺激臭のない高品質の紙素材を使用しています。本物の靴箱のフォントとロゴは通常、鮮明で詳細で、ぼやけや色の不一致はありません。 2: ロゴのホットスタンプのタイトル。ナイキの靴箱のロゴは通常、純正の靴箱のホットスタンプ部分に表示されます。
SQL ファイルを表示および編集する方法
Feb 26, 2024 pm 05:12 PM
SQL ファイルは、通常、一連の SQL ステートメントを含むテキスト ファイルです。 SQL ファイルを開くには、テキスト エディターまたは特殊な SQL 開発ツールを使用できます。 SQL ファイルを開く最も簡単な方法は、Windows のメモ帳や Notepad++、Mac のテキスト エディタなどのテキスト エディタを使用することです。 SQL ファイルを開く手順は次のとおりです。 まず、開きたい SQL ファイルを見つけて、ファイルを右クリックし、[プログラムから開く] を選択します。ポップアップウィンドウで
