部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.filebutton{
position: relative;
display: inline-block;
overflow: hidden;
}
.filebutton input{
position: absolute;
top: 0;
opacity: 0;
font-size: 100px;
}
.filebutton div{
border-radius: 8px;
font-size: 25px;
background: deepskyblue;
color: white;
padding: 10px 15px;
}
body{
margin: 0;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-wrapper" style="height: 450px;width: 100%;text-align: center;margin:auto;background-image:url(img/img1.png);background-size: 100% 100%;border: deepskyblue solid 1px">
<div>
<button href="#" style=" width:100px;height:50px;border-radius: 8px;margin-left: 1000px;margin-top: 20px">后台管理</button>
</div>
<div style="margin-top: 45px">
<span style="font-size: 40px;margin-top: 50px;color: #ffffff" class="title">图像识别，识你所见</span>
</div>
<div style="padding-top: 30px">
<span>
<input type="text" style="height: 35px;width: 450px;border-radius: 8px;" />
</span>
<input style=" color: white;height: 40px;width: 80px;border-radius:8px;background: deepskyblue" type="submit" value="视图一下"/>
</div>
<div class="filebutton" style="margin-top: 20px"><div>上传图片</div><input type="file" name="fn"></div>
</div>
</div>
<div style="width: 100% ;margin-top: 40px">
<div style="">
<a href="imageShowServlet?action=plane"> <img style="width: 265px;height: 170px;padding-left: 10px" src="img/plane.jpg" alt="飞机"></a>
<a href="imageShowServlet?action=phone">
<img style="width: 265px;height: 170px;padding-left: 20px" src="img/phone.jpg" alt="手机">
</a>
<a href="imageShowServlet?action=bird">
<img style="width: 265px;height: 170px;padding-left: 20px" src="img/bird.jpg" alt="鸟">
</a>
<a href="imageShowServlet?action=cat">
<img style="width: 265px;height: 170px;padding-left: 20px" src="img/cat.jpg" alt="猫">
</a>
<a href="imageShowServlet?action=lu">
<img style="width: 265px;height: 170px;padding-left: 20px" src="img/lu.jpg" alt="鹿">
</a>
</div>
</div>
<div style="width: 110% ;margin-top: 10px">
<div style="">
<a href="imageShowServlet?action=dog">
<img style="width: 265px;height: 170px;padding-left: 10px" src="img/dog.png" alt="狗">
</a>
<a href="imageShowServlet?action=frog">
<img style="width: 265px;height: 170px;padding-left: 20px" src="img/frog.jpg " alt="青蛙">
</a>
<a href="imageShowServlet?action=horse">
<img style="width: 265px;height: 170px;padding-left: 20px" src="img/horse.jpg" alt="马">
</a>
<a href="imageShowServlet?action=ship">
<img style="width: 265px;height: 170px;padding-left: 20px" src="img/ship.jpg" alt="船">
</a>
<a href="imageShowServlet?action=car">
<img style="width: 265px;height: 170px;padding-left: 20px" src="img/car.jpg" alt="车">
</a>
</div>
</div>
<hr/>
<div style="text-align: center; width: 100%; font-size: 12px; color: #333;">©版权所有：石家庄铁道大学信息科学与技术学院</div>
</body>
<script type="text/javascript">
var sliderWrapper = document.querySelector('.slider-wrapper');
var sliderImages = document.querySelectorAll('.slider-wrapper img');
var sliderPrev = document.querySelector('.slider-prev');
var sliderNext = document.querySelector('.slider-next');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 3000);
function nextSlide() {
if (currentSlide === sliderImages.length - 1) {
currentSlide = 0;
} else {
currentSlide++;
}
slideTo(currentSlide);
}
function prevSlide() {
if (currentSlide === 0) {
currentSlide = sliderImages.length - 1;
} else {
currentSlide--;
}
slideTo(currentSlide);
}
function slideTo(slide) {
sliderWrapper.style.left = -slide * 100 + '%';
}
sliderPrev.addEventListener('click', function() {
clearInterval(slideInterval);
prevSlide();
slideInterval = setInterval(nextSlide, 3000);
});
sliderNext.addEventListener('click', function() {
clearInterval(slideInterval);
nextSlide();
slideInterval = setInterval(nextSlide, 3000);
});
</script>
</html>
标签：function,slideInterval,博客,slider,原型,currentSlide,var,链接,nextSlide From： https://www.cnblogs.com/laohei114514/p/17284221.html