js 라운드 맵 의 전체 코드 구현

오늘 은 완전한 윤 방 도 를 쓰 는데 먼저 세 가지 기능 을 실현 해 야 한다.
1.작은 땡땡이 위 에 마 우 스 를 올 려 윤 방
2.포커 스 버튼 을 눌 러 라운드 방송
3.이음매 없 는 자동 윤 방
윤 방도 의 원리:
일련의 크기 가 같은 그림 을 평평 하 게 깔 고 CSS 레이아웃 을 이용 하여 한 장의 그림 만 표시 하고 나머지 는 숨 깁 니 다.편 이 량 계산(애니메이션 함수 봉인)을 통 해 자동 으로 재생 하거나 이벤트 클릭 을 통 해 그림 을 전환 합 니 다.

html 레이아웃:

<div id="box" class="all">
 <div class="inner"> <!--   -->
 <ul>
 <li><a href="#"><img src="images/18.jpg" width="550" height="320" alt=""></a></li>
 <li><a href="#"><img src="images/19.jpg" width="550" height="320" alt=""></a></li>
 <li><a href="#"><img src="images/14.jpg" width="550" height="320" alt=""></a></li>
 <li><a href="#"><img src="images/17.jpg" width="550" height="320" alt=""></a></li>

 </ul>
 <ol> <!--       -->

 </ol>
 </div>
 <div class="focusD" id="arr">
 <span id="left">&lt</span>
 <span id="right">&gt</span>
 </div>
</div>

css 스타일:

* {
 margin: 0;
 padding: 0;
 }
 /*<--         -->*/
 img {
 vertical-align: top;
 }

 .all {
 width: 550px;
 height: 320px;
 margin: 100px auto;
 padding: 5px;
 border: 1px solid #ccc;
 position: relative;
 }

 .inner {
 position: relative;
 width: 550px;
 height: 320px;
 background-color: pink;
 overflow: hidden;
 }

 .inner ul {
 width: 1000%;
 list-style: none;
 position: absolute;
 top: 0;
 left: 0;
 }

 .inner ul li {
 float: left;
 }

 .focusD {
 position: absolute;
 left: 0;
 top: 50%;
 width: 550px;
 padding: 0 10px;
 height: 30px;
 box-sizing: border-box;
 display: none;
 }

 .inner ol {
 position: absolute;
 right: 30px;
 bottom: 10px;
 }

 .inner ol li {
 width: 15px;
 display: inline-block;
 height: 15px;
 margin: 0 3px;
 cursor: pointer;
 line-height: 15px;
 text-align: center;
 background-color: #fff;
 }
 /*         */
 .inner ol .current {
 background-color: orange;
 color: #fff;
 }

 .focusD span {
 display: inline-block;
 width: 25px;
 font-size: 24px;
 height: 30px;
 color: #ccc;
 line-height: 30px;
 text-align: center;
 background: rgba(255, 255, 255, 0.3);
 cursor: pointer;
 }

 #left {
 float: left;
 }

 #right {
 float: right;
}

효과 보이 기:

js 부분:
 다음 에 우 리 는 js 코드 를 써 야 한다.우선 우리 가 필요 로 하 는 모든 요 소 를 가 져 와 야 한다.주:my$("id")즉 document.getElement ById 입 니 다.간편 하 게 만 드 는 방법 입 니 다.

 var index=0;
 //      div
 var box = my$("box");
 //    
 var inner = box.children[0];
 //        
 var imgWidth = inner.offsetWidth;
 //   ul
 var ulObj = inner.children[0];
 //  ul    li
 var list = ulObj.children;
 //  ol
 var olObj = inner.children[1];
 //    
 var arr = my$("arr");

그 다음 에 우 리 는 작은 버튼 인 작은 원점 을 만 들 고 마우스 로 이벤트 에 들 어 가 는 것 을 등록 해 야 합 니 다.그 전에 우 리 는 작은 원점 1,2,3 은 죽은 것 이 아니 라 얼 리 의 그림 장수 에 따라 결정 되 기 때문에 우 리 는 먼저 js 에서 div 의 ol 에 li(즉 작은 원점)를 추가 하고 얼 리 의 그림 몇 li 에 색인 값 을 추가 하여 다음 작업 을 할 수 있 도록 해 야 합 니 다.

 //     -----  ul li   
 for (var i = 0; i < list.length; i++) {
 var liObjs = document.createElement("li");
 olObj.appendChild(liObjs);
 liObjs.innerHTML = (i + 1);
 // ol   li        ，     
 liObjs.setAttribute("index", i);
 //        
 liObjs.onmouseover = function () {
 //         
 for (var j = 0; j < olObj.children.length; j++) {
 olObj.children[j].removeAttribute("class");
 }
 //            
 this.className = "current";
 //  ol li    
 index = this.getAttribute("index");
 //  ul
 animate(ulObj, -index * imgWidth); //      
 };
 }
 //     ol li     
 olObj.children[0].className = "current";

이음매 없 는 스크롤 을 실현 하려 면 첫 번 째 그림 을 복제 하여 맨 뒤에 놓 아야 합 니 다.

 //  ol    li      
 ulObj.appendChild(ulObj.children[0].cloneNode(true));

다음 단 계 는 좌우 버튼 을 누 르 면 윤방 이 이 루어 집 니 다.

//      
 my$("right").onclick=clickHandle;
 function clickHandle() {
 if (index==ulObj.children.length-1){
 ulObj.style.left=0+"px";
 index=0;
 }
 index++;
 animate(ulObj,-index*imgWidth);
 if (index==list.length-1){
 olObj.children[0].className="current";
 olObj.children[olObj.children.length-1].className="";
 }else {
 for (var i=0;i<olObj.children.length;i++){
  olObj.children[i].className="";
 }
 olObj.children[index].className="current";
 }
 };
 //      
 my$("left").onclick=function () {
 if (index==0){
 index=list.length-1;
 ulObj.style.left=-index*imgWidth+"px";
 }
 index--;
 animate(ulObj,-index*imgWidth);
 for (var i=0;i<olObj.children.length;i++){
 olObj.children[i].className="";
 }
 olObj.children[index].className="current";
 };

마지막 단 계 는 자동 으로 돌아 가 는 것 입 니 다.즉,타 이 머 를 만 들 수 있 습 니 다.일정 시간 마다 좌우 단 추 를 누 르 는 클릭 이 벤트 를 호출 합 니 다.단 추 를 누 르 는 것 과 같 습 니 다.하지만 마 우 스 를 액자 에 넣 을 때 타 이 머 를 제거 해 야 합 니 다.그렇지 않 으 면 클릭 할 때 자동 으로 돌아 가 는 것 을 주의해 야 합 니 다.
전체 js 코드:

<script>
 var index=0;
 //      div
 var box = my$("box");
 //    
 var inner = box.children[0];
 //        
 var imgWidth = inner.offsetWidth;
 //   ul
 var ulObj = inner.children[0];
 //  ul    li
 var list = ulObj.children;
 //  ol
 var olObj = inner.children[1];
 //    
 var arr = my$("arr");

 //     -----  ul li   
 for (var i = 0; i < list.length; i++) {
 var liObjs = document.createElement("li");
 olObj.appendChild(liObjs);
 liObjs.innerHTML = (i + 1);
 // ol   li        ，     
 liObjs.setAttribute("index", i);
 //        
 liObjs.onmouseover = function () {
 //         
 for (var j = 0; j < olObj.children.length; j++) {
 olObj.children[j].removeAttribute("class");
 }
 //            
 this.className = "current";
 //  ol li    
 index = this.getAttribute("index");
 //  ul
 animate(ulObj, -index * imgWidth); //      
 };
 }
 //     ol li     
 olObj.children[0].className = "current";
 //  ol    li      
 ulObj.appendChild(ulObj.children[0].cloneNode(true));


 var timeId=setInterval(clickHandle,3000);

 my$("box").onmouseover=function(){
 arr.style.display="block";
 clearInterval(timeId);
 };
 //      
 my$("right").onclick=clickHandle;
 function clickHandle() {
 if (index==ulObj.children.length-1){
 ulObj.style.left=0+"px";
 index=0;
 }
 index++;
 animate(ulObj,-index*imgWidth);
 if (index==list.length-1){
 olObj.children[0].className="current";
 olObj.children[olObj.children.length-1].className="";
 }else {
 for (var i=0;i<olObj.children.length;i++){
  olObj.children[i].className="";
 }
 olObj.children[index].className="current";
 }
 };
 //      
 my$("left").onclick=function () {
 if (index==0){
 index=list.length-1;
 ulObj.style.left=-index*imgWidth+"px";
 }
 index--;
 animate(ulObj,-index*imgWidth);
 for (var i=0;i<olObj.children.length;i++){
 olObj.children[i].className="";
 }
 olObj.children[index].className="current";
 };

 my$("box").onmouseout=function(){
 arr.style.display="none";
 timeId=setInterval(clickHandle,3000);
 };



 //       ，       
 function animate(element, target) {
 clearInterval(element.timeId);
 element.timeId = setInterval(function () {
 var current = element.offsetLeft;
 var step = 9;
 step = current > target ? -step : step;
 current += step;
 if (Math.abs(target - current) > Math.abs(step)) {
 element.style.left = current + "px";
 } else {
 clearInterval(element.timeId);
 element.style.left = target + "px";
 }
 }, 10);
 }
　　function my$(id) {
 　　 return document.getElementById(id);
　　　　}
</script>

하 이 라이트 주제 공유:jQuery 사진 윤 방자 바스 크 립 트 사진 윤 방부 트 스 트랩 사진 윤 방
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.