团队博客原型展示以及视频链接
部分代码：
<!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>
