이 기사는 이전 및 다음 기사로 나뉩니다. 나는 당신의 참조를 위해 JS Focus Carousel의 8 가지 고전적인 효과를 공유합니다. 특정 내용은 다음과 같습니다
기본 레이아웃 :
<div id = "box"> ul id = "ul id ="ul id "> <li style = '디스플레이 : 블록;'> <img src ="images/1.jpg "> </li> <li> <img src ="images/2.jpg "> </li> <li> <img src ="images/3.jpg "> </li> <li> <imgg"> <li> <img src = "images/5.jpg"> </li> </ul> <ol id = 'ol'> <li class = 'active'> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol> </div>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. 일반 초점 맵
window.onload = function () {var oul = document.getElementById ( 'ul'); var ali_u = oul.getElementsByTagName ( 'li'); var ool = document.getElementById ( 'ol'); var ali_o = ool.getElementsByTagName ( 'li'); for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseover = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; ali_u [i] .style.display = 'none'; } this.className = 'Active'; // console.log (ali_o [this.index]); ali_u [this.index] .style.display = 'block'; }}}재생산 : 사진이 생략되었습니다
2. 페이드 효과
var oul = document.getElementById ( 'ul'); var ali_u = oul.getElementsByTagName ( 'li'); var ool = document.getElementById ( 'ol'); var ali_o = oool.getElementsByTagName ( 'li = 0; i <ali_o.length; i ++) {i]. ali_o [i] .onmouseover = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; ali_u [i] .style.display = 'none'; ali_u [i] .style.filter = 'alpha (incacity = 0)'; ali_u [i] .style.opacity = 0; } this.className = 'Active'; ali_u [this.index] .style.display = 'block'; startMove (ali_u [this.index], {불투명도 : 100}); };}생식 이미지 :
3. 효과를 스크롤 :
var oul = document.getElementById ( 'ul'); var ali_U = oul.getElementsByTagName ( 'li'); var ool = document.getElementById ( 'ol'); var ali_o = oool.getElementsByTagName ( 'li'); var liheight = ali_U [0] .OffSetHeight; i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseover = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; this.classname = 'active'; startMove (oul, {top :-this.index*liheight}); }};}생식 이미지 :
4. 정기적으로 위아래로 스크롤하십시오.
window.onload = function () {var obox = document.getElementById ( 'box'); var oul = document.getElementById ( 'ul'); var ali_u = oul.getElementsByTagName ( 'li'); var ool = document.getElementById ( 'ol'); var ali_o = ool.getElementsByTagName ( 'li'); var liheight = ali_u [0] .offsetheight; var inow = 0; // 현재 인덱스 var timer = null; // 타이머 (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseover = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; this.classname = 'active'; // 관계 구축 : 매우 중요한 inow = this.index; startMove (oul, {top :-this.index*liheight}); }}; // 열린 타이머 타이머 = setInterval (Torun, 2000); obox.onmouseover = function () {clearinterval (타이머); }; obox.onmouseout = function () {timer = setInterval (Torun, 2000); }; // 시간이 지정된 함수 함수 torun () {if (inow == ali_o.length-1) {inow = 0; } else {inow ++; } for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } ali_o [inow] .className = 'active'; startMove (oul, {top : -inow*liheight}); }};생식 이미지 :
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 또한 모든 사람이 Wulin.com을 지원하고 더 흥미로운 초점 회전 목마에 계속주의를 기울이기를 바랍니다.