ホームページ >ウェブフロントエンド >htmlチュートリアル >Javascript は画像カルーセルを実装します: (1) 画像をジャンプさせます - Wu Tongwei の blog_html/css_WEB-ITnose
Javascript は画像カルーセルを実装します: (1) 画像をジャンプさせます - Wu Tongwei の blog_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:57:061560ブラウズ
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