javascript - HTML CSS JS 在整页中添加图像滑块
问题描述
极客!我有一个简单的问题要问你。我正在上学并创建一页网站。
如何将画廊添加到此代码?我想添加幻灯片图片库。例如到第 2 页,它通过在左侧和右侧窗口上制作简单的两个锚点来水平滚动。想要通过单击箭头而不是滚动来更改图像。向下滚动应该跳过画廊并显示第 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>
解决方案
我已经修改了您的代码并在第 2 页添加了与滑块相关的更改。请检查以下代码段:
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>
推荐阅读
- python - 如何使用 OpenImages 数据集在 Keras 中训练二进制模型
- python - 混淆使用 __next__ 和 __iter__ 单独的一个代码
- php - 如何检查文件是否上传PHP
- wso2esb - 在 WSO2 中发送电子邮件会添加虚假的正斜杠,导致错误 401003
- excel - 将 VBA 宏应用于后续行
- macos - Chromium 构建中的 GL_VENDOR 和 GL_RENDERER 不正确
- docker - 当 Docker 容器中托管的 asp.net 核心应用程序时,JS 和 CSS 无法在浏览器中加载
- sass - Kendo Angular SASS Builder:颜色
- jenkins - 无法访问文件 .vmtx(Jenkins 插件 vSphere Cloud)
- react-native - 启动应用程序的反应原生问题