スライドJavaScriptコード
17856 ワード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- code for using fontawesome icon -->
<script src="https://kit.fontawesome.com/ebe0a50799.js" crossorigin="anonymous"></script>
<!-- css -->
<link rel="stylesheet" href="style.css">
<!-- javascript -->
<title>Document</title>
</head>
<body>
<div class="wrapper">
<a class="prev-btn" onclick="moveSlides(-1)"> <i class="fas fa-caret-left fa-2x"></i></a>
<div class="slides-container">
<div class="slide-image">
<img src="img/nonage.PNG" alt="">
</div>
<div class="slide-image">
<img src="img/nonage2.PNG" alt="">
</div>
<div class="slide-image">
<img src="img/nonage3.PNG" alt="">
</div>
</div>
<a class="next-btn" onclick="moveSlides(1)"><i class="fas fa-caret-right fa-2x"></i></a>
<div class="navigation-dots">
<div class="single-dot" onclick="currentSlide(0)"></div>
<div class="single-dot active" onclick="currentSlide(1)"></div>
<div class="single-dot" onclick="currentSlide(2)"></div>
</div>
</div>
<script src="script.js" defer></script>
</body>
</html>
body{
margin:0;
box-sizing:border-box;
background-color: #222;
}
.wrapper{
width:100%;
}
.slides-container{
height:500px;
position: relative;
}
.slide-image{
width: 100%;
height: 100%;
position:absolute;
}
.slide-image img{
width: 100%;
height:100%;
object-fit:cover;
}
.next-btn, .prev-btn{
background-color: rgb(212, 198, 198);
padding:16px;
position: absolute;
top:50%;
transform: translateY(-50%);
z-index:100;
cursor: pointer;
transition:400ms;
font-size: 20px;
}
.next-btn:hover, .prev-btn:hover{
background-color: hotpink;
}
.next-btn{
right: 0;
}
.prev-btn{
left: 0;
}
.navigation-dots{
display:flex;
z-index:100;
height:32px;
align-items: center;
justify-content: center;
margin:16px 0;
}
.single-dot{
background-color: darkcyan;
height: 16px;
width: 16px;
border:2px solid;
border-radius: 50%;
cursor: pointer;
transition:400ms;
margin: 0 8px;
z-index:100;
display: flex;
}
.single-dot.active {
background-color: white;
}
var slideIndex = 0; //slide index
// HTML 로드가 끝난 후 동작
window.onload=function(){
showSlides(slideIndex);
// Auto Move Slide
var sec = 3000;
setInterval(function(){
slideIndex++;
showSlides(slideIndex);
}, sec);
}
// Next/previous controls
function moveSlides(n) {
slideIndex = slideIndex + n
showSlides(slideIndex);
}
// Thumbnail image controls
function currentSlide(n) {
slideIndex = n;
showSlides(slideIndex);
}
function showSlides(n) {
var slides = document.getElementsByClassName("slide-image");
var dots = document.getElementsByClassName("single-dot");
var size = slides.length;
if ((n+1) > size) {
slideIndex = 0; n = 0;
}else if (n < 0) {
slideIndex = (size-1);
n = (size-1);
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[n].style.display = "block";
dots[n].className += " active";
}
結果コードソース
https://myhappyman.tistory.com/13
Reference
この問題について(スライドJavaScriptコード), 我々は、より多くの情報をここで見つけました https://velog.io/@hsanol62/슬라이드-자바스크립트-코드テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol