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

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

WBOY

リリース： 2016-06-21 08:57:06

オリジナル

1501 人が閲覧しました

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