js에서 슬라이딩 캐러셀 이미지를 구현하는 방법은 무엇입니까?
- 零下一度원래의
- 2017-07-09 09:40:451457검색
이 기사에서는 주로 왼쪽에서 오른쪽으로 슬라이딩 캐러셀 효과의 js 구현을 자세히 소개합니다. 관심 있는 친구는 이를 참조할 수 있습니다.
캐러셀은 몇 초마다 자동으로 슬라이드하여 달성합니다. 차례로 재생되는 사진의 효과. 효과 측면에서 보면 슬라이드식 회전식 슬라이드는 그림이 왼쪽에서 오른쪽으로 미끄러지는 효과입니다. 여기서 말하는 회전식 슬라이드식은 그림이 점차적으로 표시되는 효과입니다. 첫 번째 효과를 얻는 방법입니다.
Principle
같은 크기의 사진은 하나의 열로 합쳐지지만, 한 장의 사진만 표시되고 나머지는 숨겨집니다. 왼쪽 값을 수정하여 표시된 사진을 변경합니다.
효과를 보려면 클릭하세요
html 부분
nav는 전체 컨테이너이고, 첫 번째 ul 목록 #index는 작은 점들의 목록입니다. 마우스로 가리는 점은 어떤 그림을 표시할지를 나타냅니다. , on 작은 점들에 배경색 속성을 추가하는 클래스입니다. 두 번째 ul 목록 #img는 사진 목록입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Figure</title>
<link rel="stylesheet" href="style.css" rel="external nofollow" >
</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="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>css 부분
이미지 크기는 720*405입니다. 여기서 다음 사항에 주의해야 합니다.
ul#img 목록은 nav에 대해 절대적으로 위치합니다. #img를 설정해야 합니다. 사진을 나란히 표시할 수 있도록 모든 사진의 전체 너비입니다.
전체 컨테이너 탐색의 너비는 사진의 너비인 720px, 즉 하나만 설정되어야 합니다. 그림을 표시할 수 있으며 너비를 벗어난 부분은 숨겨집니다. 즉, Overflow: Hidden
그림 목록에 작은 점 목록이 표시되어야 하므로 #img의 z-index를 설정합니다.
; 작은 점 목록은 테두리 스타일을 변경하여 일련의 리로 구성되므로 배경색만 변경하면 작은 점을 움직이는 효과를 얻을 수 있습니다.
*{
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 part
사진 이동 함수 moveElement()
moveElement 함수는 사진의 현재 위치와 대상 위치를 가져와서 이동할 간격을 계산해야 하며, offsetLeft 및 offsetTop을 사용하여 그림의 현재 위치를 얻을 수 있습니다. 이동할 때 그림을 "스와이프"하는 효과는 이동 거리를 10배로 나누는 것, 즉 setTimeOut 함수를 사용하는 것입니다. 그러나 마우스가 호버링되는 것을 방지하려면 ClearTimeout() 함수를 호출해야 합니다.
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)
}small 도트 이동 함수 moveIndex()
작은 도트 이동의 핵심은 설정된 배경색 클래스를 먼저 이동하는 것입니다. 어떤 li에 배경색이 있는지 확인한 다음 이를 제거하여 모든 li에 배경이 없도록 한 다음 현재 li에 배경을 추가합니다.
function moveIndex(list,num){//移动小圆点
for(var i=0;i<list.length;i++){
if(list[i].className=='on'){//清除li的背景样式
list[i].className='';
}
}
list[num].className='on';
}사진 자동 캐러셀
window.onload에 직접 다음 코드를 작성하세요.
여기서 변수 인덱스를 정의해야 합니다. 이는 인덱스(0~n-1, n은 li의 수) 그림으로 이동한다는 의미입니다.
var img=document.getElementById('img');
var list=document.getElementById('index').getElementsByTagName('li');
var index=0;//这里定义index是变量，不是属性
var nextMove=function(){//一直向右移动，最后一个之后返回
index+=1;
if(index>=list.length){
index=0;
}
moveIndex(list,index);
moveElement(img,-720*index,0,20);
};사진 자동 캐러셀을 사용하려면 setInterval() 함수를 사용해야 합니다. 이를 통해 프로그램은 몇 초마다 자동으로 nextMove() 함수를 호출할 수 있습니다.
var play=function(){
timer=setInterval(function(){
nextMove();
},2500);
};마우스 오버레이 작은 점 효과
작은 점이 마우스로 가려졌을 때 해당 그림이 표시되는 효과를 얻으려면 어떤 작은 점이 마우스로 가려졌는지 알아야 합니다. 여기서 각 li에 사용자 정의 속성 인덱스를 추가하여 이 속성의 값은 해당 작은 점의 일련 번호 i(0~n-1, n은 li의 수)이므로 마우스가 이를 덮을 때마다 index 속성의 값만 가져오면 됩니다. 마우스가 어느 작은 점을 덮고 있는지 알아보세요. index 속성은 변수 index와 아무 관련이 없으며 이름만 동일하다는 점에 유의하세요.
for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
list[i].index=i;//这里是设置index属性，和index变量没有任何联系
list[i].onmouseover= function () {
var clickIndex=parseInt(this.index);
moveElement(img,-720*clickIndex,0,20);
index=clickIndex;
moveIndex(list,index);
clearInterval(timer);
};
list[i].onmouseout= function () {//移开后继续轮播
play();
};
} 요약
캐러셀 차트의 구현은 복잡하지 않습니다. 가장 중요한 것은 그림의 움직이는 동작과 작은 점의 움직이는 동작을 분리하는 것입니다. 이는 구현하기 더 쉽습니다. 이 캐러셀 사진은 실제로 몇 가지 문제가 있는데, 마지막 사진에서 첫 번째 사진으로 슬라이딩할 때 슬라이딩 방식을 변경하면 해결이 쉽습니다. index는 왼쪽 값이며, index는 그림의 움직임과 작은 점의 움직임을 하나로 묶는 것입니다. 슬라이딩 방법을 현재 offsetLeft+(-720)로 변경하면 그림의 움직임이 인덱스 값과 무관할 수 있습니다. , 그리고 html 파일에 값을 추가합니다. 그림:
<li><img src="../images/img1.jpg" alt="img1"></li> <li><img src="../images/img2.jpg" alt="img2"></li> <li><img src="../images/img3.jpg" alt="img3"></li> <li><img src="../images/img4.jpg" alt="img4"></li> <li><img src="../images/img5.jpg" alt="img5"></li> <li><img src="../images/img1.jpg" alt="img1"></li>
그런 다음 마지막 그림으로 슬라이드할 때 빠르게 오프셋을 0으로 지정하고 첫 번째 그림으로 변경합니다. 두 그림은 동일하며 변경됩니다. 구별이 불가능하므로 원활한 연결이 가능합니다.
위 내용은 js에서 슬라이딩 캐러셀 이미지를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!