時間：2023-10-13 12:42:02 | 來源：網(wǎng)站運(yùn)營
時間：2023-10-13 12:42:02 來源：網(wǎng)站運(yùn)營
美食主題-html+css網(wǎng)頁制作：?> ? 源碼獲取 文末聯(lián)系 ?Web前端開發(fā)技術(shù) 描述 網(wǎng)頁設(shè)計題材，DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設(shè)計期末課程大作業(yè) | ?個人博客網(wǎng)站 | ?個人主頁介紹 | 個人簡介 | 個人博客設(shè)計制作 | 等網(wǎng)站的設(shè)計與制作 | 大學(xué)生個人HTML網(wǎng)頁設(shè)計作品 | HTML期末大學(xué)生網(wǎng)頁設(shè)計作業(yè)，Web大學(xué)生網(wǎng)頁
在線咨詢
<!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">演藝經(jīng)歷</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"; } //動態(tài)創(chuàng)建圓點(diǎn)指示器 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() //指示器響應(yīng) 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>關(guān)鍵詞：主題
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
