フロントエンドの重要なコンポーネント--マルチキャストマップの詳細チュートリアル(階層マルチキャストマップと水平マルチキャストマップ)(極めて詳細、コレクションを推奨)
31252 ワード
最近のフロントエンド学習では、Webページの中で極めて重要なコンポーネント、輪播図に遭遇し、コードで2種類の輪播図を試みた.その1階層の輪播図は、純html+css 3であり、少量のjs、その2、水平輪播図であり、これも最も一般的な輪播図であり、jsの一部の知識、タイマーなどを用いて、主にjqueryで実現されている.
かいだんれんぞくず
1,まず轮播図を作る一般的なステップはまず1つのdiv箱を作って轮播図を入れて、divの中は1つの无秩序なリストで、リストの中のliは1枚のピクチャーで、それからulリストと同级で、しかもdivのサブ要素で、2つのボタンbuttonを置いて、轮播図の前后を制御して、htmlは基本的にこのような滴です.まず、轮播図ですね.自分で一つの场所に移动します.ユーザーのマウスを置いても、轮播停止を考えなければなりません.ユーザーがボタンをクリックすると、画像を切り替えることができます.最后に、ユーザーのおじいさんたちが狂ってクリックしたバグを防ぐために、クリック时间の制限を设けて、ユーザーが3分の1秒以内に1回しかクリックできないようにします.この时间帯の他のクリックはすべて无视します.2、それからcss部分で、階層の輪播図の原理はliの中のピクチャーに絶対的な位置付けを開いて、ピクチャーたちを浮動させて、重なり合って、それでは重なり合ってどのようにそれを輪播させますか?これは主にz-index属性を用いて画像の垂直優先度を設定し、この値が大きいほど画像が上位に表示され、欲しい画像が浮かび上がるようにすることができます.transitionを0.3 sに設定したほうがいいです.透明度を調整して、より立体的に浮かび上がるようにします.実際には、jsのタイマを使用する必要がありますが、ここではともかく、以下の水平ローテーション図では、主にローテーションの原理を熟知しています.ボタンクリックイベントは、次の画像にactiveクラスを追加し、クラスにz-index値を設定して最上位に浮かび上がらせ、透明度を設定して自然に変化させることが望ましい.画像の最上位を単純に除いて、他の画像を最初に透明度0に設定すると、完全に透明になります.次に、次の画像が現れる番になったら、z-index属性を増やし、透明度1にします.transitionは時間を設定して、変化を自然にしたほうがいいです.
水平ローテーション図
水平輪播図は市場で最もよく見られる輪播図の一つではない.だからこれはとても重要で、後で詳しく話します.1,第一歩,htmlコードは上のレベルのマルチキャスト図で紹介したものと同じである.
2、cssコードを設定して、基本的なスタイルを設定して、いくつかのデフォルトのスタイルを取り除きます
(2.1)loopクラスを設定すると,ピクチャのクラスであり,主にピクチャをサイズに適応させる.
(2.2)表示枠を設定し、ルーレット図の表示口を設定し、その範囲を超えたものはすべて非表示にし、位置決めを開くことを忘れないでください.
3、かなり肝心な1歩、ここは水平の轮播図の精髄で、liの中のピクチャーをinline-blockに设定させて、ピクチャーをすべての1阶の上で、この点をやり遂げるために必ずその父の要素つまりulの长さを设定しなければならなくて、私のここは4枚のピクチャーがあって、1枚のピクチャーごとに1380 px、正常的にulの幅は1380*4であるべきで、しかしここは8280 pxに设定して、ちょうど2枚のピクチャーを多くして、つまりulには実は6枚の画像があり、leftは-1380 pxに設定されており、この6枚の画像の2枚目から再生されます.ここではまず、4枚の画像で間違いないと言っていましたが、jsで4枚の画像の最後の1枚を1番目の位置にコピーし、4枚の画像の最初の1枚のコピーを一番後ろに挿入しました.もし元の画像の順番が1、2、3、4だったら、次はjs処理を経て4、1、2、3、4、1になりました.なぜそうしたか.後の内容ですが、ここではまず説明しますが、主に輪番切り替え効果がより合理的になるためです.
4、ボタンリンクのスタイルを設定する
5、jqueryファイルをインポートし、パスに注意し、jqueryエントリ関数を書きます.
6,開始前の3ステップのノードコードの追加
7、グローバル変数を設定し、コードはマウスが表示ボタンに入り、マウスが離れ、ボタンを隠すことを実現する.
8、タイマーを設定して、自動で放送します.ここでもコード全体の1つのコアであり、1,2,3,4のピクチャをコピーにより順次挿入ノードを挿入し、4,1,2,3,4,1に変更することを前提としている.次の1～2は、最右端まで、最左端までの原理と同じように、アニメーションで切り替えることができます.
9,マウスを設定して輪番に入って停止して、マウスは離れて、輪番は再びスタートします
10、最後にボタンの論理コードを設定し、400ミリ秒以内に1回しかクリックできないように設定します.
まとめ:マルチキャストマップの実現方法は多種多様であり、これはその一つにすぎない.
かいだんれんぞくず
1,まず轮播図を作る一般的なステップはまず1つのdiv箱を作って轮播図を入れて、divの中は1つの无秩序なリストで、リストの中のliは1枚のピクチャーで、それからulリストと同级で、しかもdivのサブ要素で、2つのボタンbuttonを置いて、轮播図の前后を制御して、htmlは基本的にこのような滴です.まず、轮播図ですね.自分で一つの场所に移动します.ユーザーのマウスを置いても、轮播停止を考えなければなりません.ユーザーがボタンをクリックすると、画像を切り替えることができます.最后に、ユーザーのおじいさんたちが狂ってクリックしたバグを防ぐために、クリック时间の制限を设けて、ユーザーが3分の1秒以内に1回しかクリックできないようにします.この时间帯の他のクリックはすべて无视します.2、それからcss部分で、階層の輪播図の原理はliの中のピクチャーに絶対的な位置付けを開いて、ピクチャーたちを浮動させて、重なり合って、それでは重なり合ってどのようにそれを輪播させますか?これは主にz-index属性を用いて画像の垂直優先度を設定し、この値が大きいほど画像が上位に表示され、欲しい画像が浮かび上がるようにすることができます.transitionを0.3 sに設定したほうがいいです.透明度を調整して、より立体的に浮かび上がるようにします.実際には、jsのタイマを使用する必要がありますが、ここではともかく、以下の水平ローテーション図では、主にローテーションの原理を熟知しています.ボタンクリックイベントは、次の画像にactiveクラスを追加し、クラスにz-index値を設定して最上位に浮かび上がらせ、透明度を設定して自然に変化させることが望ましい.画像の最上位を単純に除いて、他の画像を最初に透明度0に設定すると、完全に透明になります.次に、次の画像が現れる番になったら、z-index属性を増やし、透明度1にします.transitionは時間を設定して、変化を自然にしたほうがいいです.
水平ローテーション図
水平輪播図は市場で最もよく見られる輪播図の一つではない.だからこれはとても重要で、後で詳しく話します.1,第一歩,htmlコードは上のレベルのマルチキャスト図で紹介したものと同じである.
<div id="first">
<a href="javascript:;" class="left" ><</a>
<a href="javascript:;" class="right" >></a>
<ul class="list">
<li class="">
<img src="0.jpg" alt="pic" class="loop"/>
</li>
<li class="">
<img src="1.jpg" alt="pic" class="loop"/>
</li>
<li class="">
<img src="2.jpg" alt="pic" class="loop"/>
</li>
<li class="">
<img src="3.jpg" alt="pic" class="loop"/>
</li>
</ul>
</div>
2、cssコードを設定して、基本的なスタイルを設定して、いくつかのデフォルトのスタイルを取り除きます
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a:link,a:visited,a:hover,a:active{
text-decoration: none;
}
(2.1)loopクラスを設定すると,ピクチャのクラスであり,主にピクチャをサイズに適応させる.
.loop{
padding: 0;
max-width: 100%;
}
(2.2)表示枠を設定し、ルーレット図の表示口を設定し、その範囲を超えたものはすべて非表示にし、位置決めを開くことを忘れないでください.
#first{
position: relative;
overflow: hidden;
height:352px;
width:1380px;
margin:0 auto;
background: black;
}
3、かなり肝心な1歩、ここは水平の轮播図の精髄で、liの中のピクチャーをinline-blockに设定させて、ピクチャーをすべての1阶の上で、この点をやり遂げるために必ずその父の要素つまりulの长さを设定しなければならなくて、私のここは4枚のピクチャーがあって、1枚のピクチャーごとに1380 px、正常的にulの幅は1380*4であるべきで、しかしここは8280 pxに设定して、ちょうど2枚のピクチャーを多くして、つまりulには実は6枚の画像があり、leftは-1380 pxに設定されており、この6枚の画像の2枚目から再生されます.ここではまず、4枚の画像で間違いないと言っていましたが、jsで4枚の画像の最後の1枚を1番目の位置にコピーし、4枚の画像の最初の1枚のコピーを一番後ろに挿入しました.もし元の画像の順番が1、2、3、4だったら、次はjs処理を経て4、1、2、3、4、1になりました.なぜそうしたか.後の内容ですが、ここではまず説明しますが、主に輪番切り替え効果がより合理的になるためです.
.list{
position:absolute;
top: 0;
left: -1380px;
width:8280px;
font-size: 0;
}
.list li{
width: 1380px;
display: inline-block;
}
4、ボタンリンクのスタイルを設定する
.left{
position: absolute;
left: 0;
top: 120px;
display: none;
z-index: 10;
border: 1px solid rgba(60,60,60,.8);
border-radius: 40px;
background: rgba(40,40,40,.8);
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
transition: 0.3s;
}
.right{
position: absolute;
right: 0;
top: 120px;
display: none;
z-index: 10;
border: 1px solid rgba(60,60,60,.8);
border-radius: 40px;
background: rgba(40,40,40,.8);
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
transition: 0.3s;
}
.right:hover,.left:hover{
color: rgba(255,255,255);
}
5、jqueryファイルをインポートし、パスに注意し、jqueryエントリ関数を書きます.
<script src="../jquery/js/jquery1.1.3.js"></script>
<script>$(function(){});</script>
6,開始前の3ステップのノードコードの追加
var l1 = $(".list li:first-child").clone();
var l2 = $(".list li:last-child").clone();
$(".list").append(l1);
$(".list").prepend(l2);
7、グローバル変数を設定し、コードはマウスが表示ボタンに入り、マウスが離れ、ボタンを隠すことを実現する.
var num = $(".list").children().length-1;
var pic_len = 1380;
var all_len = num*pic_len;
console.log(" :"+(num+1)+" :"+(num-1));
$("#first").on({
mouseenter:function(){
$(".left").show();
$(".right").show();
},
mouseleave:function(){
$(".left").hide();
$(".right").hide();
}
});
8、タイマーを設定して、自動で放送します.ここでもコード全体の1つのコアであり、1,2,3,4のピクチャをコピーにより順次挿入ノードを挿入し、4,1,2,3,4,1に変更することを前提としている.次の1～2は、最右端まで、最左端までの原理と同じように、アニメーションで切り替えることができます.
var left = -pic_len;
var flag = 0;
var tag = true;
var a = function(){
flag++;
left=left-pic_len;
if(left<-all_len){
left = -pic_len*1;
$(".list").css('left',left+'px');
console.log('H');
left-=pic_len;
}
if(left>0){
left = -pic_len*4;
$(".list").css('left',left+'px');
console.log('F');
left-=pic_len;
}
console.log('a:'+flag);
$(".list").animate({left:left+'px'},'0.8s');
}
go = setInterval(a,6000);
9,マウスを設定して輪番に入って停止して、マウスは離れて、輪番は再びスタートします
$("#first").on({
mouseenter:function(){
console.log(" ");
clearInterval(go);
},
mouseleave:function(){
left = parseInt($(".list").css('left'));
console.log(" ");
console.log(left);
go = setInterval(a,6000);
}
});
10、最後にボタンの論理コードを設定し、400ミリ秒以内に1回しかクリックできないように設定します.
$(".left").on({
click:function(){
if(tag){
console.log(" "+left);
left+=pic_len;
if(left>0){
left = -pic_len*4;
$(".list").css('left',left+'px');
left+=pic_len;
}
$(".list").animate({left:left+'px'},'0.8s');
tag = false;
setTimeout(function(){
tag = true;
},400);
}
}
})
$(".right").on({
click:function(){
if(tag){
console.log(" "+left);
left-=pic_len;
if(left<-all_len){
left = -pic_len*1;
$(".list").css('left',left+'px');
left-=pic_len;
}
$(".list").animate({left:left+'px'},'0.8s');
tag = false;
setTimeout(function(){
tag = true;
},400);
}
}
})
まとめ:マルチキャストマップの実現方法は多種多様であり、これはその一つにすぎない.