JS로 간단한 캐러셀 효과를 구현하는 방법은 무엇입니까? (사진과 글로 자세한 설명)-JS 튜토리얼-php.cn

JS로 간단한 캐러셀 효과를 구현하는 방법은 무엇입니까? (사진과 글로 자세한 설명)

青灯夜游

풀어 주다： 2022-08-10 17:38:36

앞으로

5079명이 탐색했습니다.

JS로 간단한 캐러셀 효과를 구현하는 방법은 무엇입니까? (사진과 글로 자세한 설명)

이 문서의 예는 참고용으로 JS에서 회전식 차트 특수 효과를 구현하는 특정 코드를 공유합니다. 구체적인 내용은 다음과 같습니다

지식 포인트

회전식 차트 아이디어:

① 전역 변수 인덱스를 생성하고 항상 현재 표시된 그림을 표시합니다.
② 현재 사진 수에 따라 아래의 ●사진 표시기를 동적으로 생성합니다.
3 캐러셀의 초기 상태는 첫 번째 사진이 중앙에 있고 나머지 사진은 모두 사진이 표시될 위치에 배치되는 것입니다.
4 >를 클릭하면 현재 그림이 애니메이션 이동 기능을 호출하여 왼쪽으로 이동함과 동시에 새 그림이 애니메이션 기능을 호출하여 p로 이동하고 다음에 표시되는 그림이 오른쪽으로 이동됩니다. 피.
⑤ 경계 판단이 필요합니다. 현재 사진이 사진 수보다 크거나 0보다 작거나 같으면 인덱스를 다시 할당합니다.
⑥ 그림 표시기를 클릭할 때 먼저 클릭과 인덱스의 위치 관계를 파악한 후 애니메이션 이동을 수행합니다.
⑦ p에 타이머를 추가하면 사진이 자동으로 이동됩니다. 마우스가 p에 들어가면 타이머가 삭제되고 마우스가 p에서 벗어나면 타이머가 설정됩니다.

실행 효과

1. 자동 캐러셀
2. 사진을 전환하려면 왼쪽과 오른쪽을 클릭하세요. 3. 아래의 사진 표시를 클릭하면 사진이 전환됩니다.

Code

MyTools.js 라이브러리가 도입되었습니다. 1.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="1.css" rel="external nofollow" >
</head>
<body>
<div id="box">
 <div id="box_content">
 <div><img src="casual01.jpg" alt=""></div>
 <div><img src="casual02.jpg" alt=""></div>
 <div><img src="casual03.jpg" alt=""></div>
 <div><img src="casual04.jpg" alt=""></div>
 <div><img src="casual05.jpg" alt=""></div>
 </div>
 <div id="box_control">
 <a href="javascript:;"><i><</i></a>
 <a href="javascript:;"><i>></i></a>
 <ul>
 </ul>
 </div>
</div>
<script src="../JavaScript学习/00MyTools/MyTools.js"></script>
<script src="1.js"></script>
</body>
</html>

로그인 후 복사

2.css

*{margin: 0;padding: 0;}
a{
 color: #999;
 text-decoration: none;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(0, 0, 0, .4);
}
a:hover{
 color: #f8b62b;
}
i{
 font-size: 50px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#box{
 height: 482px;
 width: 830px;
 background-color: red;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 overflow: hidden;
}
#box_content{
 height: 100%;
 width: 100%;
 cursor: pointer;
}
#box_content img{
 position: absolute;
 vertical-align: top;
 height: 100%;
 width: 100%;
 /*left: 830px;*/
}
.box_img{
 width: 100%;
 height: 100%;
 position: absolute;}
.box_control_right{
 position: absolute;
 right: 0;
}
.box_control_left{
 position: absolute;
 left: 0;
}
ul{
 position: absolute;
 bottom: 30px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 justify-content:space-evenly;
}
ul>li{
 list-style: none;
 width: 16px;
 height: 16px;
 background-color: #fff;
 margin: 0 3px;
 border-radius: 50%;
 cursor: pointer;
}
ul>li.current{
 background-color: darkorange;
}

로그인 후 복사

3.js

window.addEventListener(&#39;load&#39;,function (ev) {
 // 轮播图
 (function () {
 // 1. 获取需要标签
 var boxContent = myTool.$(&#39;box_content&#39;);
 var contentImg = boxContent.children;
 var boxControl = myTool.$(&#39;box_control&#39;);
 var controlBottom = boxControl.children[2];
 // 2. 全局索引
 var iNow = 0;
 // 3. 根据图片个数动态添加下方图片指示器
 for (var i = 0; i < contentImg.length; i++) {
 var li = document.createElement(&#39;li&#39;);
 controlBottom.insertBefore(li,controlBottom.children[0]);
 }
 // 4. 让第一个图片指示器选中
 controlBottom.children[0].className = &#39;current&#39;;
 // 5. 让除了第一张图片以外所有图片进入待显示区域
 var scrollImgWidth = boxContent.offsetWidth;
 for (var j = 1; j < contentImg.length; j++) {
 contentImg[j].style.left = scrollImgWidth + &#39;px&#39;;
 }
 // 6. 处理左右两侧点击
 var cPrev = boxControl.children[0];
 var cNext = boxControl.children[1];
 // 6.1 点击左边
 cPrev.addEventListener(&#39;click&#39;,function (evt) {
 // 1. 当前可视区域图片快速右移
 // 2. 上一张幻灯片出现在可视区域左侧
 // 3. 让这张幻灯片做动画进入
 myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:scrollImgWidth},null);
 iNow--;
 // 边界处理
 if (iNow < 0){
 iNow = contentImg.length - 1;
 }
 contentImg[iNow].style.left = -scrollImgWidth + &#39;px&#39;;
 myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:0},null);
 // 切换索引
 changeIndex();

 },false);
 // 6.2 点击右边
 cNext.addEventListener(&#39;click&#39;,function (evt) {
 autoPlay();
 },false);
 // 7. 下侧图片指示器操作
 for (var k = 0; k < controlBottom.children.length; k++) {
 // 取出单个li标签
 var bottomLi = controlBottom.children[k];
 // 监听鼠标进入
 (function (index) {
 bottomLi.addEventListener(&#39;mouseover&#39;,function (evt) {
  // 比较当前索引和点击指示器位置关系
  if (index > iNow){
  myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:-scrollImgWidth},null);
  contentImg[index].style.left = scrollImgWidth + &#39;px&#39;;
  }else if(index < iNow){
  myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:scrollImgWidth},null);
  contentImg[index].style.left = -scrollImgWidth + &#39;px&#39;;
  }
  iNow = index;
  myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:0});
  // 切换索引
  changeIndex();
 },false);
 })(k)
 }

 /**
 * 切换索引操作
 */
 function changeIndex() {
 for (var i = 0; i < controlBottom.children.length; i++) {
 controlBottom.children[i].className = &#39;&#39;;
 }
 // 当前的被选中
 controlBottom.children[iNow].className = &#39;current&#39;;
 }

 /**
 * 点击右侧和图片自动运动操作
 */
 function autoPlay(){
 // 1. 当前可视区域图片快速左移
 // 2. 下一张图片出现在可视区域右侧
 // 3. 让这张图片做动画进入
 myTool.slowMoving(contentImg[iNow],{&#39;left&#39;:-scrollImgWidth},null);
 iNow++;
 // 边界处理
 if (iNow >= contentImg.length) {
 iNow = 0;
 }
 contentImg[iNow].style.left = scrollImgWidth + &#39;px&#39;;
 myTool.slowMoving(contentImg[iNow], {"left": 0},null);
 // 切换索引
 changeIndex();
 }

 // 8. 设置定时器
 var timerId = setInterval(autoPlay,2000);
 // 9. 鼠标进入图片p后设置和清除定时器
 myTool.$(&#39;box&#39;).addEventListener(&#39;mouseover&#39;,function () {
 clearInterval(timerId);
 });
 myTool.$(&#39;box&#39;).addEventListener(&#39;mouseout&#39;,function () {
 timerId = setInterval(autoPlay,2000);
 });

 })();
},false);

로그인 후 복사

더 많은 js 특수 효과를 보려면

js 특수 효과 다운로드

열로 이동하세요.

위 내용은 JS로 간단한 캐러셀 효과를 구현하는 방법은 무엇입니까? (사진과 글로 자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!