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

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

Jun 21, 2016 am 08:57 AM

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

著者: towaywu

2016-02-16 11:42:53.0

29 ビュー

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

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

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

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

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

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

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset=&quot;UTF-8&quot;&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style&gt;        * {            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: &quot; &quot;;            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;        }    &lt;/style&gt;&lt;/head&gt;&lt;body&gt;       &lt;div id=&quot;slider&quot;&gt;        &lt;ul&gt;            &lt;li&gt; &lt;img src=&quot;http://www.bates-hewett.com/images/sliders/slider-1.jpg&quot; /&gt; &lt;/li&gt;            &lt;li&gt; &lt;img src=&quot;http://www.bates-hewett.com/images/sliders/slider-2.jpg&quot; /&gt; &lt;/li&gt;            &lt;li&gt; &lt;img src=&quot;http://www.bates-hewett.com/images/sliders/slider-3.jpg&quot; /&gt; &lt;/li&gt;        &lt;/ul&gt;        &lt;ol&gt;            &lt;li&gt; &lt;a href=&quot;#&quot;&gt;1&lt;/a&gt; &lt;/li&gt;            &lt;li&gt; &lt;a href=&quot;#&quot;&gt;2&lt;/a&gt; &lt;/li&gt;            &lt;li&gt; &lt;a href=&quot;#&quot;&gt;3&lt;/a&gt; &lt;/li&gt;        &lt;/ol&gt;        &lt;a href=&quot;#&quot;&gt;上一张&lt;/a&gt;        &lt;a href=&quot;#&quot;&gt;下一张&lt;/a&gt;   &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

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

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

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

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

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

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

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

ログイン後にコピー

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 までご連絡ください。