원생 JS 가 실현 한 라운드 맵 기능 에 대한 상세 한 설명
1.효과 미리 보기:
2M 이하 의 그림 만 업로드 할 수 있 기 때문에 자동 전환 효과 만 캡 처 했 습 니 다.
작성 언어
HTML,CSS,네 이 티 브 JS
셋째,창작 사고
(1)HTML 부분
1.
.slide슬라이더 라 는 뜻 으로 안에 모든 그림 을 저장 합 니 다.2.
.prev왼쪽 화살 표를 저장 합 니 다.next 는 오른쪽 화살 표를 저장 합 니 다.3.
pointer지시기 라 는 뜻 으로 아래 의 다섯 개의 전환 단 추 를 저장 하고 모든 전환 단 추 는 span 으로 표시 합 니 다.4.
.m-view창 이라는 뜻 으로 그림 을 볼 때마다 위 에 있 는 모든 위 젯 을 저장 합 니 다.(2)CSS 부분
1.
.m-view상대 적 인 포 지 셔 닝 으로 설정 하고 그의 후대 요 소 는 이 를 절대적 인 포 지 셔 닝 의 참고 로 할 수 있다.2.
.slide,.prev,.next,pointer모두 절대적 인 위치 로 적당 한 위치 에 놓는다.3.
.slide의 모든 그림 이 수평 으로 배열 되 고 창.m-view의 너 비 는 한 장의 그림 만 있 는 너비 로 설정 하면 기본 적 인 상황.slide이 모두 표 시 됩 니 다..m-view에 설정overflow:hidden을 한 후에 하위 요소 가 그 부분 을 초과 하면 숨 기 고 한 장의 그림 만 표시 하 는 효 과 를 실현 합 니 다.(3)JS 부분
1.전환 기능:
전환 함수 toggle 을 설정 하여 왼쪽 으로 자 르 거나 오른쪽 으로 그림 을 자 릅 니 다.toggle 은 두 개의 키 함수 left Toggle 과 rightToggle 이 각각 왼쪽,오른쪽으로 그림 을 전환 하여 각각
.prev과.next단추 의 clik 이벤트 에 연결 합 니 다.2.전환 기능 의 페 이 드 애니메이션 효과
1 만 있 으 면 전환 이 즉시 발생 하고 과도 효과 가 없습니다.여기 서 타이머 와 보폭 을 이용 하여 전환 기능 을 더 작은 미끄럼 작업 인 left Step 과 rightStep 로 세분 화 합 니 다.left Toggle 과 rightToggle 은 여러 번 미끄럼 작업 을 호출 하여 전환 을 실현 하면 애니메이션 효과 가 발생 합 니 다.
3.점프 기능
지시기 의 모든 원형 단추 에 점프 기능 을 연결 하고 점프 는 실제 적 으로'slide'를 이동 합 니 다.
4.자동 재생
타이머 만 설정 하고 일정 시간 마다 전환 을 실행 하면 됩 니 다.
내 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
.m-view,.m-view .slide img{
position: relative;/* */
width: 800px;
height: 600px;
}
.m-view{
overflow: hidden;/* div */
}
.m-view .slide{
position: absolute;
width: 8000px;
height: 600px;
}
.m-view .slide img{
margin-right: -5px;
}
.m-view .prev,.m-view .next{
position: absolute;
top: 40%;
font: 60px/60px Microsoft YaHei;
color: #00BFFF;
}
.m-view .prev{
left: 10px;
}
.m-view .next{
right: 10px;
}
.m-view .pointer{
position: absolute;
bottom: 40px;
left: 33%;
}
.m-view .pointer span{
display: inline-block;/* */
width: 40px;
height: 40px;
border-radius: 20px;
margin-right: 10px;
background-color: #00FF00;
}
.m-view .pointer .on{/* */
background-color: #1E90FF;
}
</style>
</head>
<body>
<div class="m-view">
<div class="slide" style="left: -800px">
<img src="../lunbo/5.jpg" alt="4">
<img src="../lunbo/1.jpg" alt="0">
<img src="../lunbo/2.jpg" alt="1">
<img src="../lunbo/3.jpg" alt="2">
<img src="../lunbo/4.jpg" alt="3">
<img src="../lunbo/5.jpg" alt="4">
<img src="../lunbo/1.jpg" alt="0">
</div>
<div class="prev"><</div>
<div class="next">></div>
<div class="pointer">
<span class="button on" index="0"></span>
<span class="button" index="1"></span>
<span class="button" index="2"></span>
<span class="button" index="3"></span>
<span class="button" index="4"></span>
</div>
</div>
<script type="text/javascript">
var view=document.getElementsByClassName('m-view')[0];
var slide=document.getElementsByClassName('slide')[0];
var prev=document.getElementsByClassName('prev')[0];
var next=document.getElementsByClassName('next')[0];
var button=document.getElementsByClassName('button');
var curIndex=0;//
var toggled=true;// ，true ，
/* Toggle */
function Toggle () {
var TIMER=50;// ， setInterval
var time=800;//
var times=time/TIMER;//
var stepLenth=800/times;//
var leftToggle=function () {
var t1=times;
function leftStep(){
slide.style.left=parseInt(slide.style.left)+stepLenth+"px";
t1--;
if (!t1) {
clearInterval(interval);
curIndex--;
if (curIndex<0) {
slide.style.left=parseInt(slide.style.left)-4000+"px";
curIndex=4;
};
toggled=true;
};
};
if (toggled==true) {
toggled=false;
button[curIndex].className="button";
if (curIndex!=0) {
button[curIndex-1].className="button on";
}else{
button[curIndex+4].className="button on";
}
var interval=setInterval(leftStep,TIMER);
};
};
var rightToggle=function () {
var t2=times;
function leftStep(){
slide.style.left=parseInt(slide.style.left)-stepLenth+"px";
t2--;
if (!t2) {
clearInterval(interval);
curIndex++;
if (curIndex>4) {
slide.style.left=parseInt(slide.style.left)+4000+"px";
curIndex=0;
};
toggled=true;
};
};
if (toggled==true) {
toggled=false;
button[curIndex].className="button";
if (curIndex!=4) {
button[curIndex+1].className="button on";
}else{
button[curIndex-4].className="button on";
};
var interval=setInterval(leftStep,TIMER);
};
}
this.leftToggle=leftToggle;//
this.rightToggle=rightToggle;
};
var toggle=new Toggle();
prev.onclick=function () {
toggle.leftToggle();
};
next.onclick=function () {
toggle.rightToggle();
};
/* */
for (var i = 0; i < button.length; i++) {
button[i].onclick=function () {
var newIndex=parseInt(this.getAttribute("index"));
if (newIndex!=curIndex) {
var distance=-800*(newIndex-curIndex);
slide.style.left=parseInt(slide.style.left)+distance+"px";
button[curIndex].className="button";
button[newIndex].className="button on";
curIndex=newIndex;
};
};
}
/* ， ， */
var intervalo=setInterval(toggle.rightToggle,3000);
view.onmouseover=function () {
clearInterval(intervalo);
}
view.onmouseout=function () {
intervalo=setInterval(toggle.rightToggle,3000);
}
</script>
</body>
</html>
1.이번 에는 대상 과 패 키 징 을 대상 으로 하 는 사 고 를 사 용 했 습 니 다.이것 은 개인 이 대상 을 대상 으로 하 는 디자인 이 코드 의 작성 방향 을 더욱 뚜렷 하 게 할 수 있 고 중복 되 는 코드 도 많이 없 앨 수 있 으 며 다른 창작 방향 도 시도 해 봤 지만 코드 를 직관 적 이지 못 하 게 만 들 수 있 기 때 문 입 니 다.주의해 야 할 것 은 패 키 징 후 외부 에 인 터 페 이 스 를 제공 하고 한 함수 에 패 키 징 되 어 있 으 면 대상 을 예화 해 야 호출 할 수 있다 는 것 이다.
2.슬라이드 에 내 연 스타일 을 설정 합 니 다.이것 은 뒤에서 왼쪽 속성 을 가 져 오고 변경 해 야 하기 때 문 입 니 다.내 연 스타일 을 사용 하지 않 으 면 설정 할 수 없습니다.초기 에.style.left 는 내부 스타일 과 외부 스타일 만 가 져 올 수 있 기 때문에 가 져 온 값 은 undefined 입 니 다.물론 다른 방법 도 사용 할 수 있 겠 지만 다른 방안 들 이 더 복잡 한 것 같 아 더 간편 한 방법 을 찾 지 못 했다.
3.앞 뒤로 한 장의 그림 을 더 놓 는 역할:
예 를 들 어 지금 은 그림 1 입 니 다.지금 은 왼쪽으로 전환 하면 다른 위치 와 같이 통 일 된 왼쪽 이동 동작 을 먼저 수행 할 수 있 습 니 다.이때 창 에 추가 로 설 치 된 그림 5 를 표시 한 다음 에'slide 전체 왼쪽으로 이동 하여 진정한 그림 5 를 창 에 표시 합 니 다.그러면 먼저 애니메이션 효과 가 나타 난 다음 에'몰래 이동'합 니 다.slide 는 마치 이동 하지 않 은 것 처럼 빈 틈 없 는 전환 을 했 습 니 다.논리 도 간단 하 다.추가 그림 을 설치 하지 않 으 면 먼저 창 을 왼쪽으로 이동 시 켜 그림 5 를 창 에 표시 해 야 합 니 다.그러면 애니메이션 효 과 를 설정 하기 어렵 습 니 다.
4.모든 span 이 부모 요소 의 색인 위 치 를 가 져 올 때
getAttribute사용자 정의 index 속성 을 가 져 오 는 방법 을 사 용 했 습 니 다.다른 방법 도 많 을 것 입 니 다.그러나 순환 에서 i 의 값 을 span 의 색인 위치 로 직접 볼 수 는 없습니다.5.점프 기능 에서 점프 하 는 것 이 바로 현재 페이지 라면 아무것도 하지 않 아야 합 니 다.그러면 성능 을 최적화 할 수 있 습 니 다.
6.좌우 화살 표를 클릭 하여 전환 할 때 지난 번 애니메이션 의 완성 여 부 를 판단 하고 완성 하지 않 으 면 전환 하지 않 습 니 다.그러면 성능 을 최적화 할 수 있 습 니 다.그렇지 않 으 면 연속 클릭 으로 인해 끊 기 고 전환 효과 가 좋 지 않 을 수 있 습 니 다.
7.코드 는 최적화 할 수 있 는 부분 이 있 는 것 같다.
8,이것 은 단지 하나의 윤 방 도 를 만 들 었 을 뿐 이 고,그 다음 에 윤 방 구성 요 소 를 만 드 는 것 을 고려 해 보 았 습 니 다.좀 더 어 려 울 것 같 습 니 다.그리고 3D 의 윤 방 효과 도 시도 해 보고 싶 습 니 다.
PS:관심 이 있 는 친 구 는 상기 코드 에 있 는 그림 을 네트워크 그림 으로 바 꾸 고 다음 과 같은 온라인 도 구 를 사용 하여 온라인 으로 실행 효 과 를 테스트 할 수 있 습 니 다.
HTML/CSS/JavaScript 코드 실행 도구
http://tools.jb51.net/code/HtmlJsRun
온라인 HTML/CSS/JavaScript 전단 코드 디 버 깅 실행 도구
http://tools.jb51.net/code/WebCodeRun
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 살 펴 볼 수 있다.,,,,,,,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
좋은 웹페이지 즐겨찾기
