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

藏色散人
풀어 주다: 2021-11-04 14:29:09
원래의
2326명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿