관련자료:
웹페이지에서 배경 이미지가 자동으로 페이드 인/아웃되는 효과를 자주 볼 수 있는데, 이는 매우 아름답고 실용적입니다. 오늘은 jquery 코드를 기반으로 한 그림벽의 자동+수동 페이드인, 페이드아웃 전환 효과에 대해 함께 알아보는 시간을 가져보겠습니다!
먼저 렌더링을 보여드리겠습니다. 좋다고 생각하시면 구체적인 구현코드를 참고해주세요.
div(class=container)를 추가하고 너비와 높이를 설정합니다. 여기서 너비는 800px, 높이는 450px입니다. 중앙 위치 지정을 추가합니다. 이미지를 보관하려면 ul(class="img") 목록을 div에 추가하세요. 이때 ul의 li 태그 위치는 절대값으로 설정되며 표시가 없음으로 설정됩니다. 이미지는 너비와 높이를 컨테이너와 동일하게 설정합니다. 아래 숫자 행을 유지하기 위해 컨테이너에 또 다른 ul 목록을 추가한 다음 그에 따라 위치를 지정하고 설정합니다. 두 개의 div(각각 왼쪽 및 오른쪽 버튼)를 추가하고 해당 위치 지정 및 설정을 수행합니다. 내부의 화살표는 각각 보다 큼 기호와 보다 작음 기호입니다.
구현 아이디어 및 원칙 소개:
해당 번호 위로 마우스를 이동하면 $(this).index()를 사용하여 해당 번호가 위치한 컨테이너에서 일련번호를 가져온 다음 해당 일련번호를 eq() 함수에 전달하여 Li를 가져옵니다. 레이블을 지정한 다음 fadeIn(); 함수를 추가합니다. 이런 식으로 숨겨진 그림이 표시되고 sibling().fadeOut()이 동시에 호출되어 동일한 수준의 형제 노드를 숨기므로 이전에 표시된 그림이 표시됩니다. 사진이 숨겨져 있습니다.
이미지를 동시에 변경하려면 setInterval() 함수를 추가하세요.
자동 전환과 수동 전환 사이의 충돌이 가장 큰 문제라고 생각합니다. 여기서 사용되는 방법은 다음과 같습니다.
참고: i와 t는 서로 다른 기능을 공유할 수 있도록 전역 변수로 설정해야 합니다. i는 현재 표시된 이미지의 인덱스를 나타냅니다. t는 setInterval의 ID입니다. 마우스가 밖으로 움직일 때 t를 변경할 필요가 없습니다. t=setInterval(time_fun,1500);만 하면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>jquery_img_switch</title>
</head>
<style type="text/css">
*{
margin: ;
padding: ;
}
.container{
width: px;
height: px;
margin: px auto;
position: relative;
}
.container .img{
list-style: none;
/*position: absolute;*/
}
.container .img li{
position: absolute;
display: none;
}
.container .img img{
width: px;
height: px;
}
.container .num{
position: absolute;
list-style: none;
font-size: ;
bottom: px;
width: %;
text-align: center;
}
.container .num li{
width: px;
height: px;
background: rgba(,,,.);
border-radius: %;
color: #;
display: inline-block;
line-height: px;
text-align: center;
font-size: px;
margin-right: px;
cursor: pointer;
}
.left, .right{
width: px;
height: px;
text-align: center;
line-height: px;
background-color: rgba(,,,.);
color: #fff;
position: absolute;
top: %;
margin-top: -px;
font-size: px;
cursor: pointer;
}
.left{
left: px;
}
.right{
right: px;
}
.container .num .active{
background: rgba(,,,);
color: #fff;
}
</style>
<script type="text/javascript" src="../jquery-...min.js"></script>
<script type="text/javascript">
var i=;
var t;
$(document).ready(function(){
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
$(".container .num li").on("mouseover",active);
t=setInterval(time_fun,);
$(".container").hover(in_fun,out_fun);
$(".container .left").on("click",left_fun);
$(".container .right").on("click",right_fun);
});
function time_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function in_fun(){
clearInterval(t);
}
function out_fun(){
t=setInterval(time_fun,);
}
function active(){
$(this).addClass("active").siblings().removeClass("active");
$(".container .img li").eq($(this).index()).fadeIn().siblings().fadeOut();
i=$(this).index();
}
function left_fun(){
i--;
if(i==-){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function right_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
</script>
<body>
<div class="container">
<ul class="img">
<li ><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
</ul>
<ul class="num">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
</body>
</html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
