홈페이지의 캐러셀 표시는 기본적으로 필수입니다. 그래서 초보자에게는 원본 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!