자바스크립트에서 캐러셀을 구현하는 방법

JavaScript에서 캐러셀을 구현하는 방법: 1. HTML 기본 코드 파일을 생성합니다. 2. 재설정을 초기화합니다. 3. js 코드 "function animate(obj, json, fn) {...}" 메서드를 사용합니다. 캐러셀 효과를 얻을 수 있습니다.

이 기사의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, DELL G3 컴퓨터.

JavaScript는 캐러셀을 어떻게 구현하나요?

캐러셀 이미지를 구현하는 JavaScript의 구체적인 코드는 참고용입니다. 구체적인 내용은 다음과 같습니다.

html 코드 스니펫

이미지를 직접 추가하거나 업로드한 사진을 사용하세요. 아래로 스크롤하여

<div class="wrap" id="wrap">
 <div class="slide" id="slide">
 <ul>
  <li><a href="#" ><img src="images/slidepic1.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic2.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic4.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic5.jpg" alt=""/></a></li>
 </ul>
 <div class="arrow" id="arrow">
  <a href="javascript:;" class="prev" id="arrLeft"></a>
  <a href="javascript:;" class="next" id="arrRight"></a>
 </div>
 </div>
</div>

css 코드 조각을 확인하세요.

Initialization Reset

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
 margin: 0;
 padding: 0
}
 
body, button, input, select, textarea {
 font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
 color: #666;
}
 
ol, ul {
 list-style: none;
}
 
a {
 text-decoration: none;
}
 
fieldset, img {
 border: 0;
 vertical-align: top;
}
 
a, input, button, select, textarea {
 outline: none;
}
 
a, button {
 cursor: pointer;
}
 
.wrap {
 width: 1200px;
 margin: 100px auto;
}
 
.slide {
 height: 500px;
 position: relative;
}
 
.slide li {
 position: absolute;
 left: 200px;
 top: 0;
}
 
.slide li img {
 width: 100%;
}
 
.arrow {
 opacity: 0;
 position: absolute;
 top: 50%;
 z-index: 1000;
 width: 100%;
}
 
.prev, .next {
 width: 76px;
 height: 112px;
 position: absolute;
 z-index: 99;
}
 
.prev {
 left: 0;
 background: url(../images/prev.png) no-repeat;
}
 
.next {
 right: 0;
 background-image: url(../images/next.png);
}

js 코드 조각:

이것은 캡슐화된 js 코드입니다. 직접 인용할 수 있습니다

function animate(obj, json, fn) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {
  var flag = true;
  for (var k in json) {
  if (k === "opacity") {
   var leader = getStyle(obj, k) * 100;
   var target = json[k] * 100;
   var step = (target - leader) / 10;
   step = step > 0 ? Math.ceil(step) : Math.floor(step);
   leader = leader + step;
   obj.style[k] = leader / 100;
  } else if (k === "zIndex") {
   obj.style.zIndex = json[k];
  } else {
   var leader = parseInt(getStyle(obj, k)) || 0;
   var target = json[k];
   var step = (target - leader) / 10;
   step = step > 0 ? Math.ceil(step) : Math.floor(step);
   leader = leader + step;
   obj.style[k] = leader + "px";
  }
  if (leader != target) {
   flag = false;
  }
  }
  if (flag) {
  clearInterval(obj.timer);
  if (fn) {
   fn();
  }
  }
 }, 15);
 }
 function getStyle(obj, attr) {
 if (window.getComputedStyle) {
  return window.getComputedStyle(obj, null)[attr];
 } else {
  return obj.currentStyle[attr];
 }
 }

onload 함수 정의, 각 객체 가져오기, 마우스 통과 이벤트 설정, 캐러셀 이미지를 통과하는 마우스는 점차적으로 화살표를 표시하고 마우스가 떠날 때 사라집니다. 그런 다음 이미지 위치를 설정합니다(객체에 값 할당).

저는 이제 막 프론트엔드 업계에 입문하기 시작했습니다. 도움이 되었으면 좋겠습니다. 의견이 있으시면 메시지를 남겨주세요. 여러분의 지원이 제 가장 큰 동기가 됩니다.

추천 학습: "

JavaScript Basics Tutorial"

위 내용은 자바스크립트에서 캐러셀을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!