この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 効果は図の通りです コードは次のとおりです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <タイトル></タイトル> <スタイル タイプ="text/css"> * { パディング: 0; マージン: 0; } 。容器 { 位置: 相対的; 幅: 600ピクセル; 高さ: 300px; マージン: 30px 自動; オーバーフロー: 非表示; } 。左 { 表示: なし; 位置: 絶対; 上位: 50%; 左: -20px; 変換: translateY(-50%); 幅:50px; 高さ: 50px; 境界線の右上の半径: 50%; 境界線の右下の半径: 50%; 背景色: rgba(0,0,0,0.5); zインデックス: 999; } .左 i { 表示: ブロック; 上マージン: 10px; 左マージン: 20px; 幅: 30ピクセル; 高さ: 30px; 背景: url(img/left.png) 繰り返しなし; 背景サイズ: 30px 30px; } 。右 { 表示: なし; 位置: 絶対; 上位: 50%; 右: -20px; 変換: translateY(-50%); 幅:50px; 高さ: 50px; 左上の境界線の半径: 50%; 左下の境界線の半径: 50%; 背景色: rgba(0,0,0,0.5); zインデックス: 999; } .right i { 表示: ブロック; 上マージン: 10px; 右マージン: 20px; 幅: 30ピクセル; 高さ: 30px; 背景: url(img/right.png) 繰り返しなし; 背景サイズ: 30px 30px; } ウル リ、オル リ { リストスタイル: なし; } 。写真 { 位置: 絶対; } .リスト{ 位置: 絶対; 下: 10px; 左: 10px; } .list li { フロート: 左; 右マージン: 10px; 幅: 10px; 高さ: 10px; 境界線の半径: 10px; 背景色: rgba(0,0,0,0.5); カーソル: ポインタ; } .list .current { 背景色: #fff; } .picture li { 位置: 絶対; 幅: 600ピクセル; 高さ: 300px; } 画像 { 幅: 100%; 高さ: 100%; } </スタイル> </head> <本文> <div class="コンテナ"> <span class="left"><i></i></span> <span class="right"><i></i></span> <ul class="picture"> <li><img src="img/1.jpg" ></li> <li><img src="img/2.jpg" ></li> <li><img src="img/3.jpg" ></li> <li><img src="img/4.jpg" ></li> <li><img src="img/5.jpg" ></li> </ul> <ol class="リスト"> </ol> </div> <script type="text/javascript"> var picture = document.querySelector('.picture'); var list = document.querySelector('.list'); var 数値 = 0; var 円 = 0; (i=0;i<picture.children.length;i++) の場合 { // 画像の位置を設定します。 picture.children[i].style.left = i*600 + 'px'; // 順序付きリストを自動的に生成します var li = document.createElement('li'); li.setAttribute('index',i); リストに追加される子要素は li です。 // liにクリックイベントを追加します li.addEventListener('click',function () { (var i=0;i<list.children.length;i++) の場合 { list.children[i].className = ''; } this.className = '現在の'; var index = this.getAttribute('index'); num = インデックス; 円 = インデックス; アニメーション化(画像、インデックス*600); }) } // 最初の子要素のクラス名を設定します。list.children[0].className = 'current'; var left = document.querySelector('.left'); var right = document.querySelector('.right'); var コンテナ = document.querySelector('.container'); // マウスがイベントコンテナから離れるように設定します。addEventListener('mouseover',function () { left.style.display = 'ブロック'; right.style.display = 'ブロック'; クリアインターバル(タイマー) タイマー = null; }) コンテナ.addEventListener('mouseleave',関数() { left.style.display = 'なし'; right.style.display = 'なし'; タイマー = setInterval(関数() { 右クリック(); },1000); }) // js アニメーション関数 function animate (obj, target, callback) { クリア間隔(obj.timer) obj.timer = setInterval(関数() { var ステップ = (ターゲット - obj.offsetLeft)/10; ステップ = ステップ > 0 ? Math.ceil(step) : Math.floor(step); if(obj.offsetLeft == ターゲット) { タイマー間隔をクリアします。 if (コールバック) { 折り返し電話(); } } obj.style.left = obj.offsetLeft + ステップ + 'px'; },15) } var first = picture.children[0].cloneNode(true); picture.appendChild(最初の); picture.lastChild.style.left = (picture.children.length-1)*600 + 'px'; // 右クリック eventright.addEventListener('click',function () { num ==picture.children.length-1の場合{ 画像スタイル左 = 0; 数値 = 0; } 数値++; アニメーション(画像、-num*600); 円++; (円 == リストの子の長さ)の場合{ 円 = 0; } (var i = 0;i<list.children.length;i++) の場合 { list.children[i].className = ''; } list.children[circle].className = 'current'; }) // 左クリックイベント left.addEventListener('click',function () { 数値==0の場合{ picture.style.left = -(picture.children.length-1)*600 +'px'; num = picture.children.length-1; } 数値--; アニメーション(画像、-num*600); 丸 - ; (円<0)の場合{ 円 = リストの子の長さ-1; } (var i = 0;i<list.children.length;i++) の場合 { list.children[i].className = ''; } list.children[circle].className = 'current'; }) var タイマー = setInterval(関数 () { // right.click() を手動で呼び出します。 },1000); </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux サーバーに Python3 をインストールする 2 つの方法
>>: MySQL 8.0.15 のインストールと設定のグラフィックチュートリアルと Linux でのパスワード変更
1 はじめに優れたコーディング習慣は優れたプログラマーが備えるべき資質ですが、コードの品質を保証する...
MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...
序文以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この...
1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...
最近、Vue のソースコードを勉強していて、Vue で親コンポーネントと子コンポーネント間でデータを...
MySQL チューニング ツールの詳細な説明と実践的な演習の説明 ツールの紹介の説明 分析例の説明...
導入から始めず、いきなり本題に入りましょう。通常の背景ぼかし効果は次のとおりです。 プロパティを使用...
ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実...
MySQL挿入時の8時間の時差の問題を解決する通常、jdbc の URL にはいくつかのパラメータを...
目次環境説明Windows 10 に Docker for Windows をインストールするWin...
前提: ストアド プロシージャは、毎日午後 10 時から午前 5 時まで 10 分ごとに実行されます...
序文同社の Ubuntu サーバーは、さまざまなシステムのディレクトリを異なる論理パーティションに配...
MySQL-8.0.23 をダウンロードクリックしてダウンロード: mysql-8.0.23-li...
プライベート変数のクロージャ実装プライベート変数は共有されないnew キーワードにより、 perso...
2日前、ダブル11ショッピングフェスティバルを利用して、Alibaba CloudでECS(サーバー...