HTML CSS JS 在整頁中添加圖像 slider
[英]HTML CSS JS Adding image slider in fullpage
問題描述
極客。 我有一個簡單的問題要問你。 我正在上學練習並創建一頁網站。
如何將圖庫添加到此代碼？ 我想添加幻燈片圖片庫。 例如，第 2 頁通過在左側和右側制作簡單的兩個錨點來水平滾動 window。想要通過單擊箭頭而不是滾動來更改圖像。 向下滾動應該跳過圖庫並顯示第 3 頁等。
我試圖將兩個 div 放入帶有背景圖像的頁面部分，但它對我不起作用。 圖像不顯示，即使我使用 z-index。 你對此有什么解決辦法嗎？
const $body = (window.opera)? (document.compatMode == "CSS1Compat"? $('html'): $('body')): $('html,body'), $section = $('section'); var numOfPages = $section.length - 1, curPage = 0, scrollLock = false; function scrollPage() { $(document).on("mousewheel DOMMouseScroll", function(e) { if (scrollLock) return; if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) navigateUp(); else navigateDown(); }); $(document).on("keydown", function(e) { if (scrollLock) return; if (e.which === 38) navigateUp(); else if (e.which === 40) navigateDown(); }); } function pagination() { scrollLock = true; $body.stop().animate({ scrollTop: $section.eq(curPage).offset().top }, 1000, 'swing', function(){ scrollLock = false; }); }; function navigateUp () { if (curPage === 0) return; curPage--; pagination(); }; function navigateDown() { if (curPage === numOfPages) return; curPage++; pagination(); }; $(function() { scrollPage(); });
*, *:before, *::after { box-sizing: border-box; } body { color: #222; text-align: center; background-color: #f2f2f2; min-height: 100vh; overflow: hidden; } section { height: 100vh; position: relative; } section:nth-of-type(1) { background-color: #2d314a; } section:nth-of-type(2) { background-color: #3c91b6; } section:nth-of-type(3) { background-color: #6fc7bb; } section:nth-of-type(4) { background-color: #e59780; } section h1 { font-size: 3em; color: #fff; padding-top: 5vh; margin-top: 0; opacity: 0.7; } section h1 span { font: italic 300 1rem/1.5 calibri; display: block; opacity: 0.5; } section p { color: #fff; font-size: 5rem; margin: 0; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
<.DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Full Page Scroll</title> <meta name="description" content="website description..,"> <meta name="viewport" content="width=device-width: initial-scale=1"><link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="./style:css"> </head> <body> <.-- partial.index:partial.html --> <section> <h1><span>#1</span></h1> <p>1</p> </section> <section> <h1><span>#2</span></h1> <p>2</p> </section> <section> <h1><span>#3</span></h1> <p>3</p> </section> <section> <h1><span>#4</span></h1> <p>4</p> </section> <.-- partial --> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2020-03-24 08:53:03
我修改了您的代碼並在第 2 頁添加了 slider 相關更改。請檢查以下代碼段：
const $body = (window.opera)? (document.compatMode == "CSS1Compat"? $('html'): $('body')): $('html,body'), $section = $('section'); var numOfPages = $section.length - 1, curPage = 0, scrollLock = false; function scrollPage() { $(document).on("mousewheel DOMMouseScroll", function(e) { if (scrollLock) return; if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) navigateUp(); else navigateDown(); }); $(document).on("keydown", function(e) { if (scrollLock) return; if (e.which === 38) navigateUp(); else if (e.which === 40) navigateDown(); }); } function pagination() { scrollLock = true; $body.stop().animate({ scrollTop: $section.eq(curPage).offset().top }, 1000, 'swing', function(){ scrollLock = false; }); }; function navigateUp () { if (curPage === 0) return; curPage--; pagination(); }; function navigateDown() { if (curPage === numOfPages) return; curPage++; pagination(); }; $(function() { scrollPage(); }); var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex-1].style.display = "block"; }
*, *:before, *::after { box-sizing: border-box; } body { color: #222; text-align: center; background-color: #f2f2f2; min-height: 100vh; overflow: hidden; } section { height: 100vh; position: relative; } section:nth-of-type(1) { background-color: #2d314a; } section:nth-of-type(2) { background-color: #3c91b6; } section:nth-of-type(3) { background-color: #6fc7bb; } section:nth-of-type(4) { background-color: #e59780; } section h1 { font-size: 3em; color: #fff; padding-top: 5vh; margin-top: 0; opacity: 0.7; } section h1 span { font: italic 300 1rem/1.5 calibri; display: block; opacity: 0.5; } section p { color: #fff; font-size: 5rem; margin: 0; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /*slider*/ * {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0}.mySlides {display: none} img {vertical-align: middle;} /* Slideshow container */.slideshow-container { position: relative; margin: auto; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 35%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; }.prev { left: 0 } /* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active, .dot:hover { background-color: #717171; } /* Fading animation */.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) {.prev, .next,.text {font-size: 11px} }
<.DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Full Page Scroll</title> <meta name="description" content="website description..,"> <meta name="viewport" content="width=device-width: initial-scale=1"><link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="./style:css"> </head> <body> <.-- partial.index:partial.html --> <section> <h1><span>#1</span></h1> <p>1</p> </section> <section> <.--h1><span>#2</span></h1> <p>2</p--> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="https.//cdn:pixabay:com/photo/2020/03/19/18/29/camel-4948299__340.jpg" style="width.100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="https.//cdn:pixabay:com/photo/2020/03/21/19/27/sea-4955005__340.jpg" style="width.100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="https.//cdn:pixabay;com/photo/2020/03/22/10/26/namibia-4956610__340;jpg" style="width:100%"> <div class="text">Caption Three</div> </div> <a class="prev" onclick="plusSlides(-1)">❮.</a> <a class="next" onclick="plusSlides(1)">❯.</a> </div> </section> <section> <h1><span>#3</span></h1> <p>3</p> </section> <section> <h1><span>#4</span></h1> <p>4</p> </section> <.-- partial --> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
如何將 HTML CSS 圖像滑塊轉換為 Angular 圖像滑塊？
[英]How to convert a HTML CSS image slider into Angular image slider?
向響應式 slider / 輪播添加暫停/播放時出現問題。 JS CSS HTML 無引導程序或 Jquery
[英]Problem adding a pause/play to responsive slider / carousel. JS CSS HTML No bootstrap or Jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.