A3 크로스페이드 슬라이드가 이상합니다.
103
작성자 없음
작성한 질문수 0
저만 그런건지는 모르겠으나, 세번째 슬라이드 이미지가 고정된 상태에서 첫번째, 두번째 슬라이드 이미지가 빠르게 점멸한 뒤 크로스페이드 슬라이드가 시작합니다. 혹시 뭐가 문제일까요?
(제일 아래쪽에 코드 텍스트 있습니다.)
@charset "utf-8";
body{
margin: 0;
font-size: 15px;
background-color: #fff;
color: #333333;
}
a{
text-decoration: none;
color: #333333;
}
.container{
border: 1px solid red;
width: 1200px;
margin: auto;
}
header{
background-color: rgb(150, 167, 236);
height: 100px;
}
header div{
/* border: 1px solid blue; */
height: 100px;
}
.header-logo{
width: 200px;
float: left;
}
.navi{
width: 600px;
float: right;
}
.slide{
width: 1200px;
height: 300px;
position: relative;
overflow: hidden;
}
.slide-items{
position: relative;
}
.slide-item{
position: absolute;
top: 0;
left: 0;
}
.slide div{
/* border: 1px solid green; */
height: 300px;
}
.items{
overflow: hidden;
}
.items div{
border: 1px solid violet;
box-sizing: border-box;
float: left;
height: 200px;
}
.notice{
width: 500px;
}
.banner{
width: 350px;
}
.direct{
width: 350px;
}
footer{
background-color: rgb(222, 222, 222);
overflow: hidden;
}
footer>div{
/* border: 1px solid salmon; */
height: 100px;
float: left;
box-sizing: border-box;
}
/*여기서부터는 일부분만 선택해서 적용하는거라 반드시 꺽쇠를 써야함!*/
.footer-logo{
width: 200px;
}
.footer-menu{
width: 1000px;
}
.footer-menu div{
/* border: 1px solid blueviolet; */
height: 50px;
}
/*모듈 이외 부분*/
.header-logo, .footer-logo{
text-align: center;
line-height: 130px;
}
.footer-menu{
text-align: center;
padding-top: 15px;
}
.footer-menu>div a{
padding: 10px;
}
.banner a>img, .direct a>img{
width: 350px;
height: 200px;
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/custom.js"></script>
<title>A3</title>
</head>
<body>
<div class="container">
<header>
<div class="header-logo">
<a href="#">
<img src="img/headerlogo.png" alt="header-logo">
</a>
</div>
<div class="navi"></div>
</header>
<div class="slide">
<div class="slide-items">
<a class="slide-item" href="#">
<img src="img/slide1.png" alt="slide1">
</a>
<a class="slide-item" href="#">
<img src="img/slide2.png" alt="slide2">
</a>
<a class="slide-item" href="#">
<img src="img/slide3.png" alt="slide3">
</a>
</div>
</div>
<div class="items">
<div class="notice"></div>
<div class="banner">
<a href="#">
<img src="img/banner.jpg" alt="banner">
</a>
</div>
<div class="direct">
<a href="#">
<img src="img/direct.png" alt="direct">
</a>
</div>
</div>
<footer>
<div class="footer-logo">
<a href="#">
<img src="img/footerLogo.png" alt="footer-logo">
</a>
</div>
<div class="footer-menu">
<div>
<a href="#">
하단메뉴1
</a>
<a href="#">
하단메뉴2
</a>
<a href="#">
하단메뉴3
</a>
</div>
<div>
COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED
</div>
</div>
</footer>
</div>
</body>
</html>@charset "utf-8";
body{
margin: 0;
font-size: 15px;
background-color: #fff;
color: #333333;
}
a{
text-decoration: none;
color: #333333;
}
.container{
border: 1px solid red;
width: 1200px;
margin: auto;
}
header{
background-color: rgb(150, 167, 236);
height: 100px;
}
header div{
/* border: 1px solid blue; */
height: 100px;
}
.header-logo{
width: 200px;
float: left;
}
.navi{
width: 600px;
float: right;
}
.slide{
width: 1200px;
height: 300px;
position: relative;
overflow: hidden;
}
.slide-items{
position: relative;
}
.slide-item{
position: absolute;
top: 0;
left: 0;
}
.slide div{
/* border: 1px solid green; */
height: 300px;
}
.items{
overflow: hidden;
}
.items div{
border: 1px solid violet;
box-sizing: border-box;
float: left;
height: 200px;
}
.notice{
width: 500px;
}
.banner{
width: 350px;
}
.direct{
width: 350px;
}
footer{
background-color: rgb(222, 222, 222);
overflow: hidden;
}
footer>div{
/* border: 1px solid salmon; */
height: 100px;
float: left;
box-sizing: border-box;
}
/*여기서부터는 일부분만 선택해서 적용하는거라 반드시 꺽쇠를 써야함!*/
.footer-logo{
width: 200px;
}
.footer-menu{
width: 1000px;
}
.footer-menu div{
/* border: 1px solid blueviolet; */
height: 50px;
}
/*모듈 이외 부분*/
.header-logo, .footer-logo{
text-align: center;
line-height: 130px;
}
.footer-menu{
text-align: center;
padding-top: 15px;
}
.footer-menu>div a{
padding: 10px;
}
.banner a>img, .direct a>img{
width: 350px;
height: 200px;
}$('.slide-item:gt(0)').hide();
setInterval(function(){
$('.slide-item:first-child').fadeOut(500).next().fadeIn(500);
$('.slide-item:first-child').appendTo('.slide-items');
}, 3000);답변 2
0
안녕하세요, 인프런 AI 인턴입니다. 도트유우카프사님!
슬라이드 동작이 예상과 달리 첫 번째와 두 번째 이미지가 빠르게 점멸한 뒤 슬라이드가 시작되는 문제를 겪으신 것 같습니다. 이 문제는 주로 슬라이드 구현 시 초기 상태 설정과 자바스크립트의 애니메이션 순서에서 발생할 수 있습니다.
먼저, 슬라이드가 시작하자마자 첫 번째와 두 번째 이미지가 순식간에 보였다가 사라지는 것은 interval과 .hide() 메서드의 초기 상태 설정과 관련이 있습니다.
해결 방법:
초기 숨기기 설정 확인:
$('.slide-items .slide-item:gt(0)').hide();이 코드가 HTML 로드 후 첫 번째 이미지를 제외한 모든 슬라이드 아이템을 숨기게 되어 있습니다. 이 설정은 괜찮아 보입니다.
초기 슬라이드 전환 타이밍 조정: 초기 설정에서 슬라이드가 순식간에 전환되는 것은
setInterval이 시작되기 전에 잠시 대기하는 것이 아니라 즉시 작동하기 때문입니다. 이는fadeOut()과fadeIn()의 시작 타이밍이 겹치기 때문입니다. 이를 해결하기 위해setTimeout을 이용하여 첫 번째 슬라이드 전환을 딜레이할 수 있습니다.
setTimeout(function(){
setInterval(function(){
$('.slide-item:first-child').fadeOut(500).next().fadeIn(500);
$('.slide-item:first-child').appendTo('.slide-items');
}, 3000);
}, 3000);
이렇게 구현하면 첫 번째 슬라이드가 화면에 적당히 노출된 후 전환되기 시작합니다.
관련된 유사한 문제와 해결책은 아래 링크들에서 참고할 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
해당 강의 PDF는 어디에 있나요?
1
56
2
2026 웹디자인개발기능사 실기 보는데 필요한 텍스트에디터는 무엇인가요?
1
92
2
예제파일
1
55
1
섹션10-77번강의 내 와이어프레임 pdf 자료 다운로드 어디서 하나요?
1
81
2
보더를 사용해 와이어프레임만드는 강의 html+css소스 다운로드 받을 수 있나요?
1
58
1
시험 시 슬라이드 작성 관련 문의
0
64
1
강의 질문 있습니다
1
69
1
시험 관련 문의
1
61
1
파워포인트 자료 다운로드 버튼 어디에 있나요?
1
55
1
브라우저 화면 줄일 시 빈 공간 발생
0
65
1
서브메뉴가 유지되지 못하고 사라지는데 무엇이 문제 일까요?
1
78
1
슬라이드 및 완성본 관련 사항
1
69
2
D유형 레이아웃 연습중인데 슬라이드 이미지 크기가 변하지 않습니다
1
90
3
B-4연습중인데 네비게이션의 a태그 두께가 이상하고 슬라이드 다운시 문제가 있습니다.
1
50
2
A2 연습중인데 메뉴 배경색과 서브메뉴 크기, 갤러리 그림 정리에 문제가 있습니다
1
68
2
A1 레이아웃 연습중인데 overflow: hidden이나 box-sizing: border-box;가 적용되지 않는 것 같습니다
1
55
2
레이어 팝업 '닫기' 가 안됩니다
1
62
1
공지사항과 갤러리 탭(안)구성 중 마우스 클릭시 색상변경이 안됩니다.
1
84
2
뷰티파이 설치 관련 문의
1
71
3
웹디자인 기능사 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능?
1
86
2
A유형~C유형 수험자 제공파일 어디서
1
73
1
A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..
0
122
4
footer 높이 값
1
47
2
div 상하분배?가 안돼요
0
72
2