이미지 캐러셀 구성 요소의 JavaScript 코드 예

이 기사에서는 이미지 캐러셀 구성 요소를 구현하는 JavaScript를 소개합니다.

효과:

자동 반복 사진을 재생하고, 아래에 해당 사진으로 전환하는 버튼이 있습니다.

이미지를 전환하려면 애니메이션을 추가하세요.

사진 위에 마우스를 올려놓으면 캐러셀이 멈추고 좌우에 두 개의 화살표가 나타납니다. 클릭하면 사진이 전환됩니다.

마우스가 그림 영역에서 멀어지면 캐러셀은 현재 위치에서 계속됩니다.

캐러셀 방향, 반복 여부, 간격을 설정할 수 있는 인터페이스를 제공합니다.

HTML 및 CSS 요구 사항:

<div class="carousel-box">
  <div class="carousel">
    <ul class="clearfix" >
      <li><img src="/static/imghwm/default1.png"  data-src="img/carousel01.jpg"  class="lazy"   alt=""></li>
      <li><img src="/static/imghwm/default1.png"  data-src="img/carousel02.jpg"  class="lazy"   alt=""></li>
      <li><img src="/static/imghwm/default1.png"  data-src="img/carousel03.jpg"  class="lazy"   alt=""></li>
      <li><img src="/static/imghwm/default1.png"  data-src="img/carousel04.jpg"  class="lazy"   alt=""></li>
      <li><img src="/static/imghwm/default1.png"  data-src="img/carousel05.jpg"  class="lazy"   alt=""></li>
      <li><img src="/static/imghwm/default1.png"  data-src="img/carousel06.jpg"  class="lazy"   alt=""></li>
    </ul>
  </div>
</div>

두 개의 상자가 중첩되어야 하고, 가장 안쪽 상자에는 ul이 있어야 하며, 이미지는 li에 포함되어야 합니다.

클래스 이름을 변경하고 CSS 파일에서 해당 클래스 이름을 바꿀 수 있습니다. 구성요소를 구성할 때 올바른 DOM 요소를 전달하기만 하면 됩니다.

이미지 너비와 개수에는 제한이 없으며 CSS 파일에서 값을 변경하면 됩니다.

/*需要更改的值*/
.carousel img{ 
  width: 600px;
  height: 400px;
}
.carousel,
.carousel-box {
  width: 600px; /*单张图片宽度*/
  height: 400px; /*单张图片高度*/
}
.carousel ul{
  width: 3600px; /*单张图片宽度x图片数量*/
}

원칙:

모든 이미지를 가로로 배치하고 가장 바깥쪽 컨테이너와 포장 컨테이너에 Overflow:hidden을 설정합니다. 가장 바깥쪽 컨테이너는 버튼과 화살표의 위치를 ​​지정하는 데 사용됩니다. 표시되는 이미지를 제어하려면 래퍼 컨테이너의 scrollLeft 속성을 사용하세요.

아이디어:

이러한 기능을 구현하려면 다음과 같은 방법이 있어야 합니다.

1. 스크롤 방향을 나타내는 매개변수를 허용합니다. 그림을 전환하려면 easing 함수를 호출하세요. 해당 버튼을 켜려면 토글 버튼 아이콘 기능을 호출하세요.

2. 이징 기능.

3. 버튼 기능을 켜주세요.

4. 초기화 기능. 이벤트 바인딩, 버튼 및 화살표 생성, 초기 위치 초기화에 사용됩니다.

5. 화살표 함수를 만듭니다.

6. 버튼 기능을 생성합니다.

7. 캐러셀 기능을 시작합니다.

8. 캐러셀 기능.

9. 정지 기능. 캐러셀을 중지하는 데 사용됩니다.

몇 가지 공개 메소드도 있습니다: $(): DOM 요소를 선택합니다. addClass(ele,"className"): 요소에 클래스 이름을 추가합니다. RemoveClass(ele,"className")은 요소의 클래스 이름을 제거합니다. $.add(ele,"type",fun): 이벤트를 DOM 노드에 바인딩합니다. getCSS(ele,"prop"): 요소의 해당 속성 값을 가져옵니다. $.delegateTag("selector","tagName","type",fun): 이벤트 프록시.

구현:

6개의 사진이 있고 각 사진의 너비는 600px이라고 가정합니다. 함수의 독립성에 따라 완료:

1. Easing 함수 라이너

Easing 함수의 기능은 대상 요소의 속성 값을 대상 요소의 속성 값을 비트 단위로 변경하는 것입니다. 값에 도달했습니다. 이를 사용하는 요소는 가로로 회전된 이미지, 세로로 회전된 이미지 또는 페이지의 왼쪽 끝에서 페이지 오른쪽 끝까지 도달하려는 작은 상자일 수 있습니다. 따라서 4개의 매개변수(대상 요소, 변경할 속성 값, 대상 값, 이동 횟수)를 받아야 합니다.

liner=function(ele,prop,next,num){
  var speed=(next-ele[prop])/num,
    i=0;
  (function(){
    ele[prop]+=speed;
    i++;
    if (i<num) {
      setTimeout(arguments.callee,30);
    }
  })();  
},

2. 라이트 버튼 기능 라이트

버튼을 켜는 것은 본질적으로 버튼에 활성 클래스를 추가하는 것이고, 버튼을 끄는 것은 활성 클래스를 제거하는 것입니다. 단추.

그럼 어떤 버튼이 현재 버튼인지 어떻게 알 수 있나요?

가장 간단한 방법은 직접 구하는 것이므로 각 버튼에 index 속성을 추가하면 됩니다. 버튼에 불을 켜야 할 경우 이 함수에 불을 붙일 버튼의 index를 전달하면 됩니다.

그럼 어떤 버튼을 꺼야 할지 어떻게 알 수 있나요?

가장 간단한 방법은 직접 얻는 방법이므로 스코프 체인 끝에 활성 변수를 추가하고 현재 켜져 있는 버튼을 기억해 두면 바로 끌 수 있는 기능입니다.

light=function(index){
  removeClass(active,"active");
  active=$(this.wrapSelec+" "+"[index="+index+"]");
  addClass(active,"active");
}

3. 이미지 전환 기능 go

는 다음 scrollLeft 값을 계산해야 합니다.

왼쪽으로 이동하는 경우 scrollLeft는 -600이어야 합니다. , 이미 0이면 3000으로 전환합니다. 따라서 ele.scrollLeft===0?width*(len-1):ele.scrollLeft-width;

로 이동하는 경우입니다. 오른쪽, scrollLeft는 +600이어야 합니다. 즉, 0——>600, 600——>1200,..., 3000——>0입니다. 여기에서는 위와 같이 판단하거나 next=(cur+distance)%(distance*num) 공식을 사용할 수 있습니다. 즉, (ele.scrollLeft+width)%(width*len)

은 다음 버튼의 인덱스를 가져와야 합니다.

scrollLeft를 계산하는 것과 같은 아이디어입니다. 왼쪽: index===0? len-1:index-1; 오른쪽으로 이동: (index+1)%len

go=function(dire){
  var index=active.getAttribute("index")-0,
    nextIndex,
    nextPosition;
  if (dire==="next") {
    nextIndex=(index+1)%len;
    nextPosition=(ele.scrollLeft+width)%(width*len);
  }else{
    nextIndex=index===0? len-1:index-1,
    nextPosition=ele.scrollLeft===0?width*len:ele.scrollLeft-width;
  }
  light(nextIndex);
  animate.liner(ele,"scrollLeft",nextPosition);  
}

여기서 len(총 사진 수), width(사진 너비) , ele(래핑 컨테이너)는 다른 함수에서도 액세스되므로 범위 체인의 끝에도 추가됩니다.

len=ele.getElementsByTagName("img").length

width=parseInt(getCSS(ele.getElementsByTagName("img")[0],"width");

ele=$(eleSelec), eleSelec은 .carousel과 같은 래핑 컨테이너의 선택자입니다

4. 화살표 함수 createArrow

를 생성하여 왼쪽 화살표를 생성합니다. 이벤트 핸들러는 오른쪽 화살표를 생성하고 이벤트 핸들러를 바인딩하여 오른쪽으로 이동하는 데 사용됩니다.

createArrow=function(){
  var prev=document.createElement("div"),
    next=document.createElement("div");
  prev.appendChild(document.createTextNode("<"));
  next.appendChild(document.createTextNode(">"));
  prev.className="arrow prev";
  next.className="arrow next";  
  container.appendChild(prev);
  container.appendChild(next);
  addClass(container,"hide");
  $.add(next,"click",function(){
    go("next");
  });
  $.add(prev,"click",function(){
    go("prev");
  });
}

컨테이너는 가장 바깥쪽 컨테이너를 나타내며 다른 컨테이너에서도 사용됩니다.

container=$(wrapSelec), WrapSelec은 .carousel-box

5. 버튼 함수 createBtn을 생성합니다

给每个按钮添加一个index用于点亮和熄灭，给按钮组添加一个类名用于设置样式和获取它：

createBtn=function(){
  var div=document.createElement("div"),
    btns='';
  for(var i=0;i<len;i++){
    btns+=&#39;<a href="#" index="&#39;+i+&#39;"></a>&#39;;
  }
  div.innerHTML=btns;
  addClass(div,"carousel-btn");
  container.appendChild(div);
}

6.轮播函数

根据要求（顺时针、逆时针）判断要调用go("prev")还是go("next")。

如果要求循环，则再次调用自己。如果不循环，则在轮播一轮后停止。

所以这里需要一个变量来判断方向，一个变量来判断是否循环，一个变量来计数。

所以又有四个变量被加到作用域链末端。direction、loop、count、begin用于清除定时器。

circle=function(){
  count++;
  if (loop||count<len) {
    if (direction==="forward") {
      go("next");
    }else{
      go("prev");
    }
  }
  begin=setTimeout(arguments.callee,t);
}

7.停止函数 stop

stop=function(){
  clearTimeout(begin);
}

8.初始化函数 init

如果是第一次使用轮播，则创建按钮和箭头，并给按钮绑定click事件处理程序（获取点击的按扭index点亮它，切换到相应图片），然后根据顺时针或逆时针来展示相应的图片和按钮。

所以这里又需要有一个变量加在作用域链末端，用于表示是否已经初始化。

init=function(){
  createBtn();
  createArrow();
  $.delegateTag(wrapSelec+" "+".carousel-btn","a","click",function(e,target){
    $.prevent(e);
    light(target.getAttribute("index"));
    animate.liner(ele,"scrollLeft",target.getAttribute("index")*width);
  });
  $.add(container,"mouseenter",function(){
    stop();
    removeClass(container,"hide");
  });
  $.add(container,"mouseleave",function(){
    addClass(container,"hide");
    begin=setTimeout(circle,t); 
  });if (direction==="forward") {
    light(0);
  }else{
    light(len-1);
    ele.scrollLeft=width*(len-1);
  }
  haveStart=true;
}

9.开始轮播函数 start

这个函数当做接口，用于控制轮播方向，间隔时间，和是否循环。计数器归零。

因为可能重复的开始轮播，所以每次开始之前都需要清除定时器。

start=function(dir,th,lo){
  stop();
  count=0;
  direction=dir;
  t=th*1000;
  loop=lo;
  if (!haveStart) {
    init();
  }
  begin=setTimeout(circle,t);
}

到这里，所有需要用到的函数已经写完了，如果把这些函数和那些需要的变量扔到一个函数里，把外层容器盒包裹容器的类名或ID传给它，这个函数返回一个包含start和stop方法的对象，这个组件就可以使用了。

但是有一个问题，这个函数只有一个，也就是说，一个页面只能有一个轮播实例。所以，如果想要一个页面能有两个轮播实例都用这个组件的话，就不能把它们扔到一个函数里。那么就只能放到对象里。每个对象有自己的变量，他们共用一组方法。

那么，这些变量就不能直接访问了，需要通过对象的属性访问，即this。

这时候就会出现问题，this是会指向调用它的那个环境，所以当那些变量在事件处理程序中，或是在定时器中被访问的时候，就不能用this，而是要创建一个闭包。

即，在能获取到this时，将this赋值给一个变量，然后在事件处理程序或是定时器中访问这个变量，就会获取到正确的对象。

以init函数为例来改装：

carouselProto.init=function(){
  var that=this;
  this.createBtn();
  this.createArrow();
  $.delegateTag(this.wrapSelec+" "+".carousel-btn","a","click",function(e,target){
    $.prevent(e);
    that.light(target.getAttribute("index"));
    animate.liner(that.ele,"scrollLeft",target.getAttribute("index")*that.width);
  });
  $.add(this.container,"mouseenter",function(){
    that.stop();
    removeClass(that.container,"hide");
  });
  $.add(this.container,"mouseleave",function(){
    addClass(that.container,"hide");
    that.begin=setTimeout(function(){
      that.circle();
    },that.t); 
  });if (this.direction==="forward") {
    this.light(0);
  }else{
    this.light(this.len-1);
    this.ele.scrollLeft=this.width*(this.len-1);
  }
  this.haveStart=true;
};

这样改装完之后，就可以创建实例了，每个实例都会有自己的属性用于记录状态，他们都共用原型中的方法。

如果采用原型继承的方式的话，可以创建一个对象作为实例的原型对象，然后创建一个函数来生产实例：

var carouselProto={};
 
//把上面那些方法给这个对象
carouselProto.light=...
carouselProto.go=...
carouselProto.stop=...
 
//创建实例对象函数
var carousel=function(eleSelec,wrapSelec){
  var that=Object.create(carouselProto);
  that.wrapSelec=wrapSelec;
  that.ele=$(eleSelec);
  that.container=$(wrapSelec);
  that.len=that.ele.getElementsByTagName("img").length;
  that.width=parseInt(getCSS(that.ele.getElementsByTagName("img")[0],"width"));
  return that;
}
 
//创建实例，使用组件
var carousel1=carousel(".carousel",".carousel-box");
   carousel1.start("forward",3,true);
var carousel2=carousel(".carousel2",".carousel-box2");
   carousel2.start("backward",2,true);

性能优化：

1.当点击的按钮刚好是当前被点亮的按钮时，依然会调用一次light和animate.liner。所以可以添加一个判断语句，如果点击的按钮刚好是正确的，就不要执行下面的了。

$.delegateTag(this.wrapSelec+" "+".carousel-btn","a","click",function(e,target){
  $.prevent(e);
  var index=target.getAttribute("index");
  if (index===that.active.getAttribute("index")) {
    return
  }
  that.light(index);
  animate.liner(that.ele,"scrollLeft",target.getAttribute("index")*that.width);
});

2.当图片切换的时候，缓动动画正在执行。如果在缓动动画还没执行完时就点击按钮或者箭头，就会进入下一次动画，于是就会出现混乱，图片错位。性能也会受到影响。为了防止这种情况发生，可以使用一个变量，用于记录缓动动画是否正在执行，没有执行的话点击按钮或箭头才会执行函数。

liner=function(ele,prop,next){
  var speed=(next-ele[prop])/10,
    i=0;
  ele.animating=true;
  (function(){
    ele[prop]+=speed;
    i++;
    if (i<10) {
      setTimeout(arguments.callee,60);
    }else{
      ele.animating=false;
    }
  })();  
}
if (!this.ele.animating) {
  this.light(nextIndex);
    animate.liner(this.ele,"scrollLeft",nextPosition);
}