duedue

클릭시 슬라이드이미지 본문

JavaScript

클릭시 슬라이드이미지

듀듀닷 2022. 1. 18. 19:26

<style>
.slide {
margin: 0 auto;
border: 1px solid black;
width: 720px;
background-color: black;
}

img {
max-width: 100%;
}

.nav {
display: inline-block;
}

#prev{
float: left;
width: 40px;
height: 40px;
background: url(images/prev.png) no-repeat;
}
#next{
float: left;
width: 40px;
height: 40px;
background: url(images/next.png) no-repeat;
}
</style>
</head>

<body>
<section class="slide">
<div class="image_box">
<img id="main_image" src="images/image1.jpg">
</div>
<div class="tollba">
<div class="nav">
<div id="prev"></div>
<div id="next"></div>
</div>
</div>
</section>
<script>
var images =['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg','images/image5.jpg']
var current = 0;
var changeImgaes = function(num){
if(current + num >=0 && current+num <images.length){
current +=num;
document.getElementById('main_image').src=images[current];
}
};

document.getElementById('prev').onclick =function(){
changeImgaes(-1);
};
 
document.getElementById('next').onclick =function(){
changeImgaes(1);
};

</script>
<style>
.slide {
margin: 0 auto;
border: 1px solid black;
width: 720px;
background-color: black;
}
img {
max-width: 100%;
}
.nav {
display: inline-block;
}
#prev{
float: left;
width: 40px;
height: 40px;
background: url(images/prev.png) no-repeat;
}
#next{
float: left;
width: 40px;
height: 40px;
background: url(images/next.png) no-repeat;
}
#page{
display: inline-block;
float: left;
float: left;
margin-top: 8px;
height: 32px;
color: white;
}
</style>
</head>
<body>
<section class="slide">
<div class="image_box">
<img id="main_image" src="images/image1.jpg">
</div>
<div class="tollba">
<div class="nav">
<div id="prev"></div>
<div id="page"></div>
<div id="next"></div>
</div>
</div>
</section>
<script>
var images =['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg','images/image5.jpg']
var current = 0;
var pageNum = function(){
document.getElementById('page').textContent = (current+1)+'/'+images.length;
}
var changeImgaes = function(num){
if(current + num >=0 && current+num <images.length){
current +=num;
document.getElementById('main_image').src=images[current];
pageNum();
}
};
pageNum();
document.getElementById('prev').onclick =function(){
changeImgaes(-1);
};
 
document.getElementById('next').onclick =function(){
 
changeImgaes(1);
 
};
</script>
'JavaScript' Related Articles more