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; I는 컨베이어도 전 달성 제 1 픽쳐 디스플레이와 제 작은 백색 점의 색을 만들 것이다 : 그래서, I는 CSS 혼탁 혼탁 내부 그림을 설정하기 때문에 다음에, 초기화 인터페이스이다 :

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

그런 다음이 미리 설정된 작은 도트 버튼 효과 후이며, 작은 도트 클릭 달성 대응하는 화상 표시를 할 것이며, 전방은 누르기 전에 사진을 표시한다; 후에 적용 마찬가지로 :

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 사진을 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을 사용하려는 경우,

첫 번째 통화 타이머에서 더 빠르게 회전 목마를 제작, 타이머를 지우거나 타이머가 겹쳐졌습니다 수 있도록, 나는 또한 추가 된 마우스가 움직일 때 회전 목마 타이머가 삭제 된 드로잉을 멈출 때, 때 마우스 아웃, 타이머가 다시 호출됩니다.

추천