슬라이드 를 이용해 탑배너를 만들었습니다.
본문
안녕하세요.
슬라이드 를 이용해서. 탑 띠 배너를 만들었는데요.
원하는대로 잘 구현은 되는데.
페이지 접속할때나. 다른페이지 이동 순간에 슬라이드 배너 등록한 전체이미지 가 쭈욱 떳다가 사라집니다.
이런경우는 어떻게 처리를 해야할까요 ??
배너 php 를 따로 만들어서 헤더 파일에 인쿠르드 시켰습니다.
<script type="text/javascript">
$(document).ready(function () {
$(".mySlideDiv").not(".active").hide(); //화면 로딩 후 첫번째 div를 제외한 나머지 숨김
setInterval(nextSlide, 4000); //4초(4000)마다 다음 슬라이드로 넘어감
});
//이전 슬라이드
function prevSlide() {
$(".mySlideDiv").hide(); //모든 div 숨김
var allSlide = $(".mySlideDiv"); //모든 div 객체를 변수에 저장
var currentIndex = 0; //현재 나타난 슬라이드의 인덱스 변수
//반복문으로 현재 active클래스를 가진 div를 찾아 index 저장
$(".mySlideDiv").each(function(index,item){
if($(this).hasClass("active")) {
currentIndex = index;
}
});
//새롭게 나타낼 div의 index
var newIndex = 0;
if(currentIndex <= 0) {
//현재 슬라이드의 index가 0인 경우 마지막 슬라이드로 보냄(무한반복)
newIndex = allSlide.length-1;
} else {
//현재 슬라이드의 index에서 한 칸 만큼 뒤로 간 index 지정
newIndex = currentIndex-1;
}
//모든 div에서 active 클래스 제거
$(".mySlideDiv").removeClass("active");
//새롭게 지정한 index번째 슬라이드에 active 클래스 부여 후 show()
$(".mySlideDiv").eq(newIndex).addClass("active");
$(".mySlideDiv").eq(newIndex).show();
}
//다음 슬라이드
function nextSlide() {
$(".mySlideDiv").hide();
var allSlide = $(".mySlideDiv");
var currentIndex = 0;
$(".mySlideDiv").each(function(index,item){
if($(this).hasClass("active")) {
currentIndex = index;
}
});
var newIndex = 0;
if(currentIndex >= allSlide.length-1) {
//현재 슬라이드 index가 마지막 순서면 0번째로 보냄(무한반복)
newIndex = 0;
} else {
//현재 슬라이드의 index에서 한 칸 만큼 앞으로 간 index 지정
newIndex = currentIndex+1;
}
$(".mySlideDiv").removeClass("active");
$(".mySlideDiv").eq(newIndex).addClass("active");
$(".mySlideDiv").eq(newIndex).show();
}
</script>
<style>
/* Slideshow container */
.slideshow-container {
max-width: ;
position: center;
margin: auto;
margin-top: ;
}
/* effect */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
</br>
<div class="slideshow-container">
<div class="mySlideDiv fade active">
<a href=""><img src="이미지" width="100%" height="120"></a>
</div>
<div class="mySlideDiv fade">
<a href=""><img src="이미지" width="100%" height="120"></a>
</div>
<div class="mySlideDiv fade">
<a href=""><img src="이미지" width="100%" height="120"></a>
</div>
<div class="mySlideDiv fade">
<a href=""><img src="이미지" width="100%" height="120"></a>
</div>
<div class="mySlideDiv fade">
<a href=""><img src="이미지" width="100%" height="120"></a>
</div>
<div class="mySlideDiv fade">
<a href=""><img src="이미지" width="100%" height="120"></a>
</div>
<div class="mySlideDiv fade">
<a href=""><img src="이미지" width="100%" height="120"></a>
</div>
<a class="prev" onclick="prevSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</div>
답변 1
반응형 홈페이지가 아니시라면 위에 div로 감싸시면 더 밑으론 안나올꺼에용
<div style="overflow:hidden; height:120px;">
<div class="slideshow-container"> ... </div>
</div>
해결했습니다.
감사합니다 ^^
답변을 작성하시기 전에 로그인 해주세요.
