ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptで画像カルーセル効果を実装 (1) 画像を作成する Jump_JavaScript スキル
JavaScriptで画像カルーセル効果を実装 (1) 画像を作成する Jump_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:15:131325ブラウズ
画像カルーセル効果は、すべての主要 Web サイトのホームページで見られ、比較的一般的です。以下のエディタでは、このエフェクトの簡単な実装を共有します。
1. 画像がジャンプします
2.ピクチャシーケンス制御の実装
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 の下の LI の数を見つける必要があります。
次に、ウィンドウ モードを使用します。#slider はウィンドウ、ul は窓の外の風景、ul は水平方向に配置されます。
次に、外の風景が窓のサイズで表示されます。つまり、各画像が毎回窓の風景として使用されます。ここでは、画像のサイズが窓と同じサイズになるように制御されます。上記はレイアウト処理の概念を説明しています。次に、画像の表示間隔を変更するには、JS の setInterval または setTimeout を使用します (これは簡単に取得できるため)。 )
ジャンプするたびに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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。