时间：2023-10-13 12:42:02 | 来源：网站运营
时间：2023-10-13 12:42:02 来源：网站运营
美食主题-html+css网页制作：> ⛵ 源码获取 文末联系 ✈Web前端开发技术 描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 个人博客网站 | 个人主页介绍 | 个人简介 | 个人博客设计制作 | 等网站的设计与制作 | 大学生个人HTML网页设计作品 | HTML期末大学生网页设计作业，Web大学生网页
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>天海祐希 Yuki Amami - Index</title> <meta content="" name="description"> <meta content="" name="keywords"> <!-- Favicons --> <!-- Template Main CSS File --> <link href="css/style.css" rel="stylesheet"></head><body> <!-- ======= Header ======= --> <header id="header" class="fixed-top d-flex justify-content-center align-items-center header-transparent"> <nav id="navbar" class="navbar"> <ul> <li><a class="nav-link scrollto active" href="">主页</a></li> <li><a class="nav-link scrollto" href="about.html">基本信息</a></li> <li><a class="nav-link scrollto" href="resume.html">演艺经历</a></li> <li><a class="nav-link scrollto" href="services.html">获奖记录</a></li> <li><a class="nav-link scrollto " href="portfolio.html">美图欣赏</a></li> <li><a class="nav-link scrollto" href="contact.html">分享你的见解</a></li> </ul> <i class="bi bi-list mobile-nav-toggle"></i> </nav><!-- .navbar --> </header><!-- End Header --> <!-- ======= Hero Section ======= --> <section id="hero"> <div class="hero-container"> <h1>天海祐希</h1> <h2>日本女演员，代表作《千年之恋·源氏物语》、《女王的教师》、《BOSS》等等</h2> <a href="#about" class="btn-scroll scrollto" title="Scroll Down"><i class="bx bx-chevron-down"></i></a> </div> </section><!-- End Hero --> <!-- =======尾部 ======= --> <footer id="footer"> <div class="container"> <h3>Yuki Amami</h3> <div class="social-links"> <div class="contentl"> <ul class="wrapper"> <li><img src="picture/portfolio-2.jpg"></li> <li><img src="picture/portfolio-4.jpg"></li> <li><img src="picture/portfolio-7.jpg"></li> <li><img src="picture/portfolio-2.jpg"></li> </ul> <ul class="radius"> </ul> <div class="prev"> <span> < </span> </div> <div class="next"> <span>></span> </div> </div> </div> <div class="copyright"> © Copyright <strong><span>xxx</span></strong>. All Rights Reserved </div> </div> </footer><!-- 尾部 --> <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a></body></html><script type="text/javascript"> window.onload = function () { var contentl = document.getElementsByClassName('contentl')[0] var wrapper = document.getElementsByClassName('wrapper')[0] var radius = document.getElementsByClassName('radius')[0] var prev = document.getElementsByClassName('prev')[0] var next = document.getElementsByClassName('next')[0] var imgWidth = wrapper.children[0].offsetWidth var wrapIndex = 0 //悬停显隐 contentl.onmouseover = function () { clearInterval(timer) next.style.opacity = "0.6"; prev.style.opacity = "0.6"; } contentl.onmouseout = function () { timer = setInterval(function () { next.onclick() }, 3500) next.style.opacity = "0"; prev.style.opacity = "0"; } //动态创建圆点指示器 function createLi() { for (let i = 0; i < wrapper.children.length - 1; i++) { let li = document.createElement("li") radius.appendChild(li) } radius.children[0].className = 'radius-active' } createLi() //指示器响应 function cirAction(wrapIndex) { for (let i = 0; i < radius.children.length; i++) { radius.children[i].classList.remove("radius-active") } if (wrapIndex === wrapper.children.length - 1) { radius.children[0].className = 'radius-active' } else { radius.children[wrapIndex].className = 'radius-active' } } //指示器控制 function cirMouse() { for (let i = 0; i < radius.children.length; i++) { radius.children[i].onmouseover = function () { clearInterval(timer); animate(wrapper, -i * imgWidth); wrapIndex = i; cirAction(wrapIndex) } } } cirMouse() //滑动动画 function animate(el, target) { clearInterval(el.timer) el.timer = setInterval(function () { let move = 25; let present = wrapper.offsetLeft; move = present > target ? -move : move; present += move; if (Math.abs(present - target) > Math.abs(move)) { wrapper.style.left = present + 'px' } else { clearInterval(el.timer); wrapper.style.left = target + 'px' } }, 16) } //next控制 next.onclick = function () { if (wrapIndex === wrapper.children.length - 1) { wrapIndex = 0; wrapper.style.left = 0 + 'px'; } wrapIndex++; animate(wrapper, -wrapIndex * imgWidth); cirAction(wrapIndex); } //prev控制 prev.onclick = function () { if (wrapIndex === 0) { wrapIndex = wrapper.children.length - 1; wrapper.style.left = -wrapIndex * imgWidth + 'px'; } wrapIndex--; animate(wrapper, -wrapIndex * imgWidth); cirAction(wrapIndex) } //自动滑动 var timer = setInterval(function () { next.onclick() }, 3500) }</script><style> * { margin: 0; padding: 0; } .contentl { width: 1080px; height: 300px; position: relative; overflow: hidden; margin: 0 auto; } .wrapper { width: 400%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; display: flex; transition: none; } .wrapper li { flex: 1; list-style: none; margin: 0; padding: 0; } .wrapper li img { width: 100%; } .radius { height: 12px; margin: 0; padding: 0; position: absolute; bottom: 10px; left: 10px; display: flex; align-items: center; } .radius li { width: 8px; height: 8px; border-radius: 50%; background-color: white; opacity: 0.6; margin: 0 3px; padding: 0; list-style: none; } .radius-active { opacity: 1 !important; border: 2px solid rgb(255, 255, 255, 0.5); background-clip: padding-box; } .prev { width: 23px; line-height: 34px; text-align: center; position: absolute; left: 0; top: 50%; margin-top: -17px; background-color: darkgray; opacity: 0; } .next { width: 23px; line-height: 34px; text-align: center; position: absolute; right: 0; top: 50%; margin-top: -17px; background-color: darkgray; opacity: 0; } .prev span, .next span { font-weight: bold; color: white; font-size: 18px; }</style>关键词：主题
