자바스크립트 이미지 슬라이드 질문입니다.
조회수 949회
이미지 슬라이드를 만들기 위해서 css와 java를 코드펜에서 가져왔는데요
css는
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
background-size: 100%;
}
.slider {
position: relative;
border: 1px solid black;
width: 100%;
height: 1024px;
background-color: #ccc;
margin: 0 auto;
}
.slider_nav {
position: absolute;
bottom: 0;
left: 0;
width:100%;
text-align: center;
margin: 0 auto;
padding: 0;
list-style-type: none;
z-index: 100;
}
.slideBtn {
color: white;
opacity: 0.7;
text-decoration: none;
display: inline-block;
font-size: 2rem;
}
.slideBtn.active {
opacity: 1;
}
.slide {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all .2s ease-in-out;
width: 100%;
height: 100%;
z-index: 3;
background-size: cover;
background-repeat: no-repeat;
}
.slide_content {
position:absolute;
left:20%;
top:30%;
padding:20px;
background-color: rgba(0,0,0,.4);
border-radius:3px;
}
.slide_content > * {
color:white;
opacity:1;
}
.slide.active {
opacity: 1;
}
.secondary_nav {
position:absolute;
top: 0;
width:15%;
height:100%;
z-index:500;
opacity: 0.3;
transition: opacity 0.2s ease-in-out;
cursor:pointer;
color:white;
font-size:4rem;
}
.secondary_nav:hover{
opacity:0.8;
}
.backBtn {
left:0;
background: linear-gradient(to right, rgba(0,0,0,0.5),rgba(0,0,0,0));
}
.backBtn:before {
content:'\02039';
position:absolute;
top:50%;
left:25%;
transform: translateY(-60%);
}
.fwdBtn {
right:0;
background: linear-gradient(to left, rgba(0,0,0,0.5),rgba(0,0,0,0));
}
.fwdBtn:before {
content:'\0203A';
position:absolute;
top:50%;
right:25%;
transform: translateY(-60%); /*bump it back up half its height*/
}
.image1 {
background-image: url(../img/MAIN.jpg);
}
.image2 {
background-image: url(../img/eb6fdaa2ed6aa6b81a26382fec4704f7.jpg);
}
.image3 {
background-image: url(../img/rayban-11.jpg);
}
적용이 잘 되는데
var btns = document.querySelectorAll(".slideBtn");
var backBtn = document.querySelector(".backBtn");
var fwdBtn = document.querySelector(".fwdBtn");
var slides = document.querySelectorAll(".slide");
var activeSlide = 0;
function advanceSlides(count) {
if (!count) {
count = 1;
}
activeSlide = activeSlide + count;
if (activeSlide == slides.length) {
activeSlide = 0;
}
if (activeSlide < 0) {
activeSlide = slides.length - 1;
}
showSlide(activeSlide);
}
function showSlide(slideIndex) {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
btns[i].classList.remove("active");
}
btns[slideIndex].classList.add("active");
slides[slideIndex].classList.add("active");
}
var handleClick = function(evt) {
var slideNumber = evt.target.getAttribute("data-slide-target");
var slideIndex = slideNumber - 1;
//if this is the first click stop the auto slide
if (intervalId) {
window.clearInterval(intervalId);
}
showSlide(slideIndex);
return false;
};
var fwdClick = function(evt) {
if (intervalId) {
window.clearInterval(intervalId);
}
advanceSlides();
};
var backClick = function(evt) {
if (intervalId) {
window.clearInterval(intervalId);
}
advanceSlides(-1);
};
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", handleClick);
}
backBtn.addEventListener("click", backClick);
fwdBtn.addEventListener("click", fwdClick);
//start slider
var intervalId = window.setInterval(advanceSlides, 3000);
자바를 입력하면 좌우로 움직이질 않아서요...
자동으로 움직이게 할순없나요 ㅠㅠ
아 그리고 자동이 아니여도 다음 페이지 사진 자체가 안보여요 ㅠㅠ
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
댓글 입력