Javascript は画像カルーセルを実装します: (1) 画像をジャンプさせます - Wu Tongwei の blog_html/css

JavaScript は画像カルーセルを実装します: (1) 画像をジャンプさせます!

ホームページ

ウェブフロントエンド

htmlチュートリアル

Javascript は画像カルーセルを実装します: (1) 画像をジャンプさせます - Wu Tongwei の blog_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:57 AM

JavaScript は画像カルーセルを実装します: (1) 画像をジャンプさせます!

著者: towaywu

2016-02-16 11:42:53.0

29 ビュー

カテゴリ: HTML/CSS/JAVASCRIPT フロントエンドプログラミングプログラミング言語

画像カルーセル効果は、現在の Web サイトのトップページにはほぼ必須の効果です。そこで、この効果の簡単な実装を 3 つの側面から説明します。

画像がジャンプします
画像シーケンス制御の実装
前後ボタン制御の実装

この記事では、間隔に応じて画像がどのように切り替わるかを見ていきます

まずは構造コードを完成させましょう。詳細な説明は省略します。

コードは次のとおりです。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style>        * {            box-sizing: border-box;        }        a {            text-decoration: none;        }        ul,ol,li{          list-style: none;            margin: 0;            padding: 0;        }        #slider{            width: 800px;            height: 300px;            overflow: hidden;            position: relative;            margin: 0 auto;        }        #slider ul{            width: 2400px;            position: relative;        }        #slider ul:after{            content: " ";            width: 0;            height: 0;            display: block;        }        #slider ul li{            float: left;            width: 800px;            height: 300px;            overflow: hidden;        }        #slider ul li img{            width: 100%;        }        #slider ol{            position: absolute;            bottom: 10px;            left: 46%;        }        #slider ol li{            display: inline-block;        }        #slider ol li a{            display: inline-block;            padding:4px 8px;            border-radius:15px;            background-color: #000;            color: #fff;        }        #slider .prev, #slider .next{            display: inline-block;            position: absolute;            top: 49%;            background-color: #000;            opacity: 0.6;            color: #fff;            padding: 3px;        }        #slider .prev{            left: 10px;        }        #slider .next{            right: 10px;        }    </style></head><body>       <div id="slider">        <ul>            <li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>            <li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>            <li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>        </ul>        <ol>            <li> <a href="#">1</a> </li>            <li> <a href="#">2</a> </li>            <li> <a href="#">3</a> </li>        </ol>        <a href="#">上一张</a>        <a href="#">下一张</a>   </div></body></html>

ログイン後にコピー

さて、JS を通じて画像のジャンプを制御しましょう。

まず、画像の位置を見つける必要があります。ここでは ul を介してレイアウトするので、まず UL を見つける必要があります。

次に、画像を 1 つずつ表示します。ウィンドウモード、つまり #slider モードを使用します。は窓、ulは窓の外の風景、ulは風景を横に並べます

すると、外の風景が窓の大きさに合わせて表示されます。つまり、それぞれの写真がそれぞれの風景として使用されますここでは、画像のサイズをウィンドウと同じサイズに制御します。

次に、JS の表示間隔を制御します。画像を表示するには、JS の setInterval または setTimeout を使用する必要があります。ここでは setInterval( を使用すると便利です。)

ジャンプするたびに、UL の位置の左側を制御して、下の景色が表示されるようにします。 ul は毎回異なる表示が可能で、この左はウィンドウの幅に応じて決定され、最初の左はもちろん -800 * 0、2 番目は -800 * 1、3 番目は -800 * 2...

<script>      (function(){          var slider = document.getElementById("slider");          var imgul = slider.getElementsByTagName("ul")[0];          var imglis = imgul.getElementsByTagName("li");          var len = imglis.length;          var index = 0;          setInterval(function(){              if(index >= len){                  index = 0;              }               imgul.style.left = - (800 * index) + "px";               index++;          },2000);      })();  </script>

ログイン後にコピー

JS コードは非常に単純に見えます。ここでは 2 秒間のジャンプシーケンスを設定し、次の数の後に最初の画像に戻ります。

この記事は、Wu Tongwei のブログ、WeChat 公開アカウント: bianchengderen、QQ グループ: 186659233 に属します。転載する場合は、出典と対応するリンクを明記してください: http://www.wutongwei.com/front/infor_showone.tweb?id=202、どなたでも拡散および共有を歓迎します。

タグ: JavaScript チュートリアル。 JavaScript の例

HTML5 カメラおよびビデオコントロール

データは残りません

towaywu

テクノロジーが好きで起業家としての道を進んでいる負け犬です。一緒にコミュニケーションすることを歓迎します。

プログラマーの WeChat 公開アカウント: ビアンチェンデレン

QQ グループ: 186659233

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホット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）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7645

CakePHP チュートリアル

1392

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

152

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。