> 웹 프론트엔드 > JS 튜토리얼 > 네이티브 자바스크립트는 이미지 캐러셀 효과 code_javascript 기술을 구현합니다.

네이티브 자바스크립트는 이미지 캐러셀 효과 code_javascript 기술을 구현합니다.

WBOY
풀어 주다: 2016-05-16 18:20:20
원래의
1302명이 탐색했습니다.

QQ 슬라이딩 메뉴의 효과를 흉내내기 위해 BlueDream님이 블로그에서 작성한 자바스크립트를 봤습니다. 코드가 정말 우아하고 차이점이 눈에 띄네요. 다음에는 그의 코드의 본질을 훔쳐보겠습니다.
[간단한 원리 설명]
html과 css는 JQuery에서 이미지 캐러셀 효과를 구현하기 위해 사용하는 것과 동일하므로 생략한다. 주로 몇 가지 공개 기능이 있으며 점차적으로 나타나고 사라지며 클로저로 구현됩니다. 주요 논리 부분은 매우 일반적입니다.
[프로그램 소스 코드]
fadeIn, fadeout, fadeOut, fade 몇 가지 공개 함수만 게시하세요

코드 복사 코드는 다음과 같습니다.

function id(name) {return document.getElementById(name);}
//Traversal function
function Each( arr , 콜백) {
if (arr.forEach) {arr.forEach(콜백);}
else {
for (var i = 0, len = arr.length; i < len; i ) callback.call(this, arr[i], i, arr);}
}
function fadeIn(elem) {
setOpacity(elem, 0)
for ( var i = 0; i < 20; i ) {
(function() {
var pos = i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
})(i);
}
}
function fadeOut(elem) {
for ( var i = 0; i <= 20; i ) {
(function() {
var pos = 100 - i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
} )(i);
}
}
// 투명도 설정
function setOpacity(elem, level) {
if (elem.filters) {
elem.style.filter = "alpha(opacity=" level ")";
} else {
elem.style.opacity = level / 100
}
}

[호출 방법]
//count: 사진 개수, WrapId: 사진을 감싸는 DIV, ulId: 버튼 DIV, infoId: 정보 표시줄
babyzone.scroll(count,wrapId,ulId,infoId) );
babyzone.scroll(4,"banner_list","list","banner_info")
【소스 코드 다운로드】
/201009/yuanma/scroll_babyzone.rar
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿