캐러셀의 스크롤 효과를 얻기 위해 간단한 js 코드를 사용하는 방법은 무엇입니까?
- 藏色散人원래의
- 2018-08-09 16:26:234270검색
홈페이지의 캐러셀 표시는 기본적으로 필수입니다. 그래서 초보자에게는 원본 js를 사용하는 것이 다소 어려울 수 있습니다. 사실 이미지 스크롤을 복잡하게 생각할 필요는 없습니다. js 캐러셀 이미지의 구현 원리는 주로 같은 크기의 이미지를 하나의 열로 병합하는 것으로 이해하면 되지만, 이미지 중 하나만 표시되고 나머지는 숨겨지므로 왼쪽 값을 수정하여 표시되는 이미지가 변경됩니다. 회전식 사진은 몇 초마다 자동으로 슬라이드되어 사진을 차례로 재생하는 효과를 얻습니다. 효과에는 슬라이딩과 점진적인 효과가 있습니다. 슬라이딩 회전식은 사진이 왼쪽에서 오른쪽으로 점차적으로 들어가는 효과입니다. 이미지는 투명도를 기준으로 이미지가 점차적으로 표시되는 효과입니다.
그래서 이 글은 js를 사용하여 이미지 캐러셀과 슬라이딩 효과를 구현하는 방법을 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.
캐러셀 이미지를 구현하기 위한 js의 구체적인 코드 예제는 다음과 같습니다.
//HTML代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现轮播图原理及示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--从左向右滑动-->
<nav>
<ul id="index">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="img">
<li><img src="img1.jpg" alt="img1"></li>
<li><img src="img2.jpg" alt="img2"></li>
<li><img src="img3.jpg" alt="img3"></li>
<li><img src="img4.jpg" alt="img4"></li>
<li><img src="img5.jpg" alt="img5"></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>//css代码部分
*{ margin:0; padding:0;
} nav{ width: 720px; height: 405px; margin:20px auto; overflow: hidden; position: relative;
} #index{ position: absolute; left:320px; bottom: 20px;
} #index li{ width:8px; height: 8px; border: solid 1px gray; border-radius: 100%; background-color: #eee; display: inline-block;
} #img{ width: 3600px;/*不给宽高无法移动*/
height: 405px; position: absolute;/*不定义absolute，js无法设置left和top*/
z-index: -1;
} #img li{ width: 720px; height: 405px; float: left;
} #index .on{ background-color: black;
}//js代码部分
function moveElement(ele,x_final,y_final,interval){//ele为元素对象
var x_pos=ele.offsetLeft; var y_pos=ele.offsetTop; var dist=0; if(ele.movement){//防止悬停
clearTimeout(ele.movement);
} if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
return;
}
dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
ele.style.left=x_pos+'px';
ele.style.top=y_pos+'px';
ele.movement=setTimeout(function(){//分10次移动，自调用10次
moveElement(ele,x_final,y_final,interval);
},interval)
}참고:
이미지 이동 함수 moveElement()는 이미지의 현재 위치와 대상 위치를 가져와서 사이의 간격을 계산해야 합니다. 이동을 위해 offsetLeft 및 offsetTop을 사용하여 그림의 현재 위치를 얻을 수 있습니다. 이동할 때 그림을 "스와이프"하는 효과는 이동 거리를 10배로 나누는 것, 즉 setTimeOut 함수를 사용하는 것입니다. 그러나 마우스가 호버링되는 것을 방지하려면 ClearTimeout() 함수를 호출해야 합니다. .
【관련 추천글】
위 내용은 캐러셀의 스크롤 효과를 얻기 위해 간단한 js 코드를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!