이 기사의 내용은 js에서 캐러셀 효과를 얻는 방법을 공유하는 것입니다. 여기에는 특정 참조 값이 있습니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다.
다음은 인터넷에 있는 많은 예입니다. 원활한 스크롤은 요소의 왼쪽 값을 변경하여 이미지를 왼쪽과 오른쪽으로 스크롤하는 것입니다.
먼저 p+css의 구조 스타일을 살펴보겠습니다. 
p+css 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
/*消除图片底部3像素距离*/
img{
vertical-align: top;
}
.scroll{
width: 500px;
height: 200px;
margin: 100px auto;
border: 1px solid #ccc;
padding: 7px;
overflow: hidden;
position: relative;
}
.box{
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.box ul{
width: 600%;
position: absolute;
left: 0;
top: 0;
}
.box ul li{
float: left;
}
.scroll ol{
position: absolute;
right: 10px;
bottom: 10px;
}
.scroll ol li{
float: left;
width: 20px;
height: 20px;
background: pink;
text-align: center;
line-height: 20px;
border-radius: 50%;
background-color: pink;
margin-left:10px ;
cursor: pointer; }
.scroll ol li.current{
background-color: purple; }
</style>
</head>
<body>
<p id="scroll" class="scroll">
<p id="box" class="box">
<ul id="ul">
<li><img src="images/1.jpg" style="max-width:90%" style="max-width:90%" alt="js에서 캐러셀 효과를 얻는 방법" ></li>
<li><img src="images/2.jpg" style="max-width:90%" style="max-width:90%" alt="js에서 캐러셀 효과를 얻는 방법" ></li>
<li><img src="images/3.jpg" style="max-width:90%" style="max-width:90%" alt="js에서 캐러셀 효과를 얻는 방법" ></li>
<li><img src="images/4.jpg" style="max-width:90%" style="max-width:90%" alt="js에서 캐러셀 효과를 얻는 방법" ></li>
<li><img src="images/5.jpg" style="max-width:90%" style="max-width:90%" alt="js에서 캐러셀 효과를 얻는 방법" ></li>
</ul>
<ol id="ol">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</p>
</p>
</body></html>표시 효과는 그림과 같습니다. 
다음으로 js 코드를 추가해야 합니다.
그 전에 작은 점 1 2 3은 하드 코딩되지 않고 ul li의 사진 수에 따라 결정되므로 먼저 p의 ol li에서 코드를 제거해야 합니다.
원활한 스크롤을 위해서는 하나가 필요합니다. 즉, 첫 번째 사진을 복제하여 마지막에 넣습니다. 이때 CSS 레이아웃은 유지되고 p만 남습니다:
<body>
<p id="scroll" class="scroll">
<p id="box" class="box">
<ul id="ul">
<li><img src="images/1.jpg" style="max-width:90%" style="max-width:90%" alt="js에서 캐러셀 효과를 얻는 방법" ></li>
<li><img src="images/2.jpg" style="max-width:90%" style="max-width:90%" alt="js에서 캐러셀 효과를 얻는 방법" ></li>
<li><img src="images/3.jpg" style="max-width:90%" style="max-width:90%" alt="js에서 캐러셀 효과를 얻는 방법" ></li>
<li><img src="images/4.jpg" style="max-width:90%" style="max-width:90%" alt="js에서 캐러셀 효과를 얻는 방법" ></li>
<li><img src="images/5.jpg" style="max-width:90%" style="max-width:90%" alt="js에서 캐러셀 효과를 얻는 방법" ></li>
</ul>
</p>
</p>
</body>이때 js 코드를 사용하여 작은 점을 생성합니다
var scroll = document.getElementById("scroll"); // 获得大盒子
var ul = document.getElementById("ul"); // 获得ul
var ulLis = ul.children;// 获得ul的盒子 以此来生成ol中li的个数
var liWidth = ul.children[0].offsetWidth;// 获得每个li的宽度
// 操作元素
// 因为要做无缝滚动，所以要克隆第一张，放到最后一张后面
// 1. 克隆元素
ul.appendChild(ul.children[0].cloneNode(true)); // 2.创建ol 和li
vaar ol = document.createElement("ol");//创建ol元素
scroll.appendChild(ol);// 把ol放到scroll盒子里面去
for (var i=0;i<ulLis.length-1;i++) { var li = document.createElement("li");// 创建li元素
li.innerHTML = i + 1;// 给li里面添加文字 1 2 3 4 5
ol.appendChild(li);// 将li元素添加到ol里面
}
ol.children[0].className = "current";// ol中的第一个li背景色为purple 이때 작은 점인 ol li 요소가 생성되고, 그런 다음 js를 사용하여 애니메이션을 적용합니다.
애니메이션 부분에는 다음이 포함됩니다.
1. 마우스가 어느 작은 점 위로 지나가든, 어떤 그림이 표시되고, 작은 점의 색상도 변경됩니다.
2. 타이머 필요)
3. 마우스가 사진 위로 지나가면 사진 재생이 자동으로 중지됩니다. (타이머를 지워야 합니다.)
4. 마우스가 사진을 벗어나면 사진이 계속 자동으로 회전합니다(타이머를 다시 시작하세요)
여기 animate() 애니메이션 기능을 캡슐화합니다
// 动画函数 第一个参数，代表谁动 第二个参数 动多少
// 让图片做匀速运动，匀速动画的原理是 当前的位置 + 速度 即 offsetLeft + speed
function animate(obj,target){
// 首先清除掉定时器
clearInterval(obj.timer); // 用来判断 是+ 还是 - 即说明向左走还是向右走
var speed = obj.offsetLeft < target ? 15 : -15;
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;//它们的差值不会超过speed
obj.style.left = obj.offsetLeft + speed + "px"; // 有可能有小数的存在，所以在这里要做个判断
if (Math.abs(result) <= Math.abs(speed)) {
clearInterval(obj.timer);
obj.style.left = target + "px";
}
},10);
}Timer function
var timer = null; // 轮播图的定时器
var key = 0;// 控制播放的张数
var circle = 0;// 控制小圆点
timer = setInterval(autoplay,1000);// 自动轮播
function autoplay(){
/*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,
就要重头开始播放. 因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/
key++; // 先++
if(key > ulLis.length-1){// 后判断
ul.style.left = 0; // 迅速调回
key = 1; // 因为第6张是第一张，所以播放的时候是从第2张开始播放
} // 动画部分
animate(ul,-key*liWidth); // 小圆点circle 当显示第几张图片是，对应的小圆点的颜色也发生变化
/*同理,对小圆点也要有一个判断*/
circle++; if (circle > olLis.length-1) {
circle = 0;
} // 小圆点颜色发生变化
for (var i = 0 ; i < olLis.length;i++) { // 先清除掉所用的小圆点类名
olLis[i].className = "";
} // 给当前的小圆点 添加一个类名
olLis[circle].className = "current";
}좋아요, 여기서는 기본 코드, 특정 코드를 보여줍니다. 캐러셀 효과를 얻기 위해 js를 다운로드하려면 여기를 확인하세요
위 내용은 js에서 캐러셀 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
