JSは、ネイティブ図の効果の回転を使用して実装しました

ほとんどオリジナルを知っている私のブログのマイクロチャンネル公衆数
私は処女のjsの効果のカルーセルビューを書くためにキビ公式サイトをモデル化してサイトを訪問することは、多くのサイトがカルーセル図にこの効果を有することを見出し、これらの日は、ようにあなたを願っています。
：これは私が最後に達成githubのに掲載の効果であるHTTPS：//heternally.github.io / ...

今、私は単にあなたが、私は、プロセスの効果を実現するものであることを教えてくれ、何か間違った場所がある場合、お互いから学ぶためにそれらを容易にするために、それを言うために歓迎します。

私はみんなの単純なHTML + CSSのフロントができるはずであると信じて、私は単にどのようなコードをお見せするために、ここで言うことはできません。

HTML部分

<div id="wrap">
<div class="banner">
    <div class="banner-img">
        <img src="images/1.jpg" width="1226" height="460" alt="轮播图1">
    </div>
</div>

<div class="banner">
    <div class="banner-img">
        <img src="images/2.jpg" width="1226" height="460" alt="轮播图2">
    </div>
</div>

<div class="banner">
    <div class="banner-img">
        <img src="images/3.jpg" width="1226" height="460" alt="轮播图3">
    </div>
</div>

<div class="banner">
    <div class="banner-img">
        <img src="images/4.jpg" width="1226" height="460" alt="轮播图4">
    </div>
</div>

<div class="banner">
    <div class="banner-img">
        <img src="images/5.jpg" width="1226" height="460" alt="轮播图5">
    </div>
</div>

<div class="tab">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<div class="prev">

</div>
<div class="next"></div>
</div>

CSSのセクション

* {
  margin:0;
  padding:0;
}
#wrap {
  position:relative;
  margin:20px auto;
  width:1226px;
  height:460px;
}
#wrap .banner {
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  opacity:0;
  transition: opacity 2s;
}
#wrap .tab{
  position:absolute;
  bottom:10px;
  right:10px;
}
    #wrap .tab span{
      display: inline-block;
      width:6px;
      height:6px;
      margin:3px;
      background:rgba(105,105,105,0.5);
      border-radius:50%;
      cursor: pointer;
      border:2px solid #887B6E;
    }
    #wrap .tab span.on{
      background:#E2CEB7;
    }
    #wrap .tab span:hover{
      background:#E2CEB7;
    }
#wrap .prev {
  position:absolute;
  left:20px;
  top:210px;
  width:41px;
  height:69px;
  background: url("images/icon-slides.png") 82px;
  cursor:pointer;
}
#wrap .prev:hover{
  background: url("images/icon-slides.png");
} 
#wrap .next {
  position:absolute;
  right:20px;
  top:210px;
  width:41px;
  height:69px;
  background: url("images/icon-slides.png") 41px;
  cursor:pointer;
}
#wrap .next:hover{
  background: url("images/icon-slides.png") 123px;
}

上記のコードは非常に単純ですが、それにはほとんどの外観は、のは、その部分のJSにフォーカスを始めましょう

まず第一に、私は、クラス名、ID及びその他の方法により、各ノードを取得したいと思います：

var oBody = document.getElementsByTagName("body")[0];
var aBanner = document.getElementsByClassName("banner");
var aSpan = document.getElementsByClassName("tab") [0].getElementsByTagName("span");
var oNext = document.getElementsByClassName("next")[0];
var Oprev = document.getElementsByClassName("prev")[0];
var Oon = document.getElementsByClassName("on")[0];

0;私はカルーセル数字の前に達成され、第1の画像の表示と第1小白ドットの色を作りますので、私は、CSSの不透明度不透明内部の画像を設定するので、次は、初期化インターフェースです。

aBanner[0].style.opacity = "1";
aSpan[0].className = "on";
var num = 0;

A後効果;そして、小さなドットボタンの効果の後に、事前に設定され、小ドットのクリックを達成するため、対応する画像の表示、フロントはクリックする前に画像を表示するようになりますこと以下のように：

for(var i = 0;i < aSpan.length;i++){
aSpan[i].index = i;
aSpan[i].onclick = function(){  //点击小圆点图片相对应的进行切换
for(var j = 0 ;j < aSpan.length; j++){
  num = this.index;
  aSpan[j].className = "";
  aBanner[j].style.opacity = "0";
}
aSpan[num].className = "on";
aBanner[num].style.opacity = "1";
}
oNext.onclick = function(){//按下图片切换到后一张
  for(var j = 0 ;j < aSpan.length; j++){
  if(aSpan[j].className == "on"){
      aSpan[j].className = "";
      aBanner[j].style.opacity = "0";
      j++;
      num++;
      if(j > 4){
      j = 0;
  }
      aSpan[j].className = "on";
aBanner[j].style.opacity = "1";

  }
}
}

  Oprev.onclick = function(){  //按下图片切换到前一张
  for(var j = 0 ;j < aSpan.length; j++){
      if(aSpan[j].className == "on"){
          aSpan[j].className = "";
          aBanner[j].style.opacity = "0";
          j--;
          num--;
          if(j < 0){
          j = 4;
      }
          aSpan[j].className = "on";
  aBanner[j].style.opacity = "1";

  }
}
}  
}

forループのこの部分では、前記長さは、小ドットの数は、このサイクルでは、ドット画像にそれぞれ対応するように、各ドットのインデックス割当ての値を与え、です。
次に、現在の標準的な値を取得する機能で、現在の時間を達成、ドット上の機能のクリックをドット書く上ですべてのドット「を削除し、値がグローバル変数numの、絵がOに設定されているように、不透明度に割り当てられていると言います「スタイル、その後、不透明度の最初のnum写真が1に設定され、追加」スタイル」で、これに対応する画像にジャンプするドットクリックを達成します。
同じ効果は、進むボタンを背面達成することができます。

最後に、画像カルーセルを達成するためにタイマー機能を設定します。

function Time(){/*设置定时器运行的函数*/
num++;
if(num < 5){
    for(var j = 0 ;j < aSpan.length; j++){
    aSpan[j].className = "";
    aBanner[j].style.opacity = "0";
}
aSpan[num].className = "on";
aBanner[num].style.opacity = "1";
}else {
    num = -1;
}         
}
clearInterval(timer);
var timer = setInterval("Time()",2000);/*调用定时器*/

oBody.onmouseover = function(){/*鼠标引入，清除定时器，轮播图停止*/
    clearInterval(timer);
};
oBody.onmouseout = function(){/*鼠标移出，重新调用定时器，轮播图开始*/
    clearInterval(timer);
     timer = setInterval("Time()",2000);
};

あなたは、タイマーを呼び出すと、私がするsetIntervalを使用するか、また可能setTimeroutを使用したい場合は、

タイマをクリアした最初のコールタイマーで、またはタイマーが速くカルーセルを作り、重畳されている聞かせて、私はまた、追加カルーセルはタイマがクリアされていることを描画停止したときにマウスが移動したときに、ときマウスのうちは、タイマーが再び呼び出されます。

おすすめ