<html>
<head>
<title>圖片展示</title>
<style>
.slide {
margin: 0 auto;
border: 1px solid black;
width: 720px;
background-color: black;
}
img {
max-width: 100%;
}
.toolbar {
overflow: hidden;
text-align: center;
}
.nav {
display: inline-block;
}
#back {
float: left;
width: 40px;
height:40px;
background: url(images/output/back.png) no-repeat;
}
#next {
float: left;
width: 40px;
height:40px;
background: url(images/output/next.png) no-repeat;
}
#filename {
background-color: white;
color: black;
text-align: left;
}
</style>
</head>
<body>
<div class="slide">
<div class="image_box">
<img id="main_image" src="images/1.jpg"></img>
</div>
<div class="toolbar">
<div class="nav">
<div id="back"></div>
<div id="next"></div>
</div>
</div>
<div id="filename">
images/1.jpg
</div>
</div>
<script>
let images=[];
for(let i=0;i<7;i++) {
images[i] = (i+1) + ".jpg";
}
console.log(images);
let current = 0;
function change(num){
if ((current + num >= 0) && (current + num < images.length)) {
current += num;
let imagesrc = 'images/' + images[current];
document.getElementById('main_image').src = imagesrc;
document.getElementById('filename').textContent = imagesrc;
}
}
let backel = document.getElementById('back');
backel.addEventListener('click', function(){ change(-1); }, false);
let nextel = document.getElementById('next');
nextel.addEventListener('click',function(){ change(1);}, false);
</script>
</body>
</html>
沒有留言:
張貼留言