javascript - 如何使用 CSS-Grid 和 javascript 制作图像幻灯片
问题描述
我正在尝试制作图像幻灯片。但这似乎不起作用我在检查 javascript 时没有收到任何错误。不知道我做错了什么
$( document ).ready(function() {
$('.work').scroll(function() {
var $this= $('h2');
$('.image').each(function () {
var hT = $(this).offset().top,
hH = $('h2').outerHeight(),
wH = $('.work').height(),
wS = $this.scrollTop();
console.log((hT-wH) , wS);
if (wS > (hT+hH-wH)){
$('#count').text($(this).data('index'));
}
});
});
});
function smallscreen() {
if (window.innerWidth < 959) {var workSlide = document.querySelector('.work');
var sliderImages = document.querySelectorAll('.work h2');
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
var counter = 1;
const size = sliderImages[0].clientWidth;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
nextButton.addEventListener('click', function next() {
if (counter >= sliderImages.length - 1) return;
workSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevButton.addEventListener('click', function prev() {
if (counter <=0) return;
workSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
workSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
workSlide.addEventListener('transitionend',function loopin() {
if (sliderImages[counter].class === 'clonelast') {
workSlide.style.transition = "none";
counter = workSlide.length -2;
}
if (sliderImages[counter].class === 'clonefirst') {
workSlide.style.transition = "none";
counter = workSlide.length -2;
}
});
}
}
window.onload = window.resize = smallscreen;@media only screen and (max-width: 959px) /*and (orientation:portrait)*/ {
html,body {
max-width: 100%;
height: 100%;
}
.main{
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-gap: 1.5em;
}
.header {
grid-column: 1fr;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
grid-row: 1;
z-index: 2;
width: 100vw;
height: 60px;
}
.header h3 {
display: none;
}
.logo {
grid-column: 1;
max-width: 100%;
display: grid;
justify-items: center;
}
.logo embed{
display: block;
margin: auto;
max-width: 50%;
height: auto;
}
.body {
grid-row: 2/3;
display: grid;
grid-gap: 1.5em;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
margin: 0;
padding: 0;
z-index: 1;
}
.about{
max-width: 100vw;
}
h1 {
font-family: 'DM Sans', sans-serif, Arial, Helvetica;
font-size: 13.5pt;
line-height: 22pt;
font-weight: 500;
color: #000000;
}
.work {
grid-row: 2 / 4;
grid-column: 1;
display: flex;
width: 100%;
}
.image > img{
max-width: 100vw;
height: auto;
}
.buttons {
grid-row: 2 / 4;
grid-column: 1;
align-self: center;
padding: 0.75em;
display: grid;
grid-template-columns: 1fr 1fr;
transition: 0.5s ease 0s;
z-index: 4;
width: 100vw;
}
.prev {
justify-self: start;
}
.next {
justify-self: end;
}
button {
background: none;
color: inherit;
border: none;
font: inherit;
cursor: pointer;
outline: inherit;
display: flex;
}
.buttons :hover {
color: white;
}
.footer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
z-index: 3;
min-height: 80px;
grid-row: 3;
text-align: center;
max-width: 100vw;
}
.phone {
grid-row: 2;
align-self: center;
justify-self: center;
}
.media {
list-style-type: none;
display: flex;
justify-content: space-between;
padding: 1em 0 0;
grid-row: 1;
padding-bottom: 1em;
}
li > a {
text-decoration: none;
color: black;
}
li > a:hover {
font-weight: 800;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<title>DesignLover-Question</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<a href="https://www.walumozagba.com">
<embed src="https://collartocuff.files.wordpress.com/2010/01/chanel-logo-png-image-e1512737281632.png" alt="logo" width="500px">
</a>
</div>
<h3><span id="count">1</span>/17</h3>
</div>
<div class="body">
<div class="about">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla <a href="mailto:info@walumozagba.com">pariatur</a>. <br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
</div>
<div class="work">
<h2 class="image" data-index="0"></h2>
<h2 class="image clonefirst" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image clonelast" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="1"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="2"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="3"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="4"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="5"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="6"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="7"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="8"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="9"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="10"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="11"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="12"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="13"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="14"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="15"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="16"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
<h2 class="image" data-index="17"><img src="https://media.architecturaldigest.in/wp-content/uploads/2016/09/Indian-minimalism_041.jpg"></h2>
</div>
<div class="buttons">
<button class="prev">PREV</button>
<button class="next">NEXT</button>
</div>
</div>
<div class="footer">
<div class="phone">
<p>+31 123 12 12 12</p>
</div>
<ul class="media">
<li><a href="https://www.behance.net/walum" target="_blank">Behance</a></li>
<li><a href="https://www.facebook.com/itswalu/" target="_blank">Facebook</a></li>
<li><a href="https://www.instagram.com/walumozagba/" target="_blank">Instagram</a></li>
<li><a href="mailto:info@walumozagba.com">Email</a></li>
</ul>
</div>
</div>
<script src="JS/scriptscroll.js" type="text/javascript"></script>
</body>
</html>解决方案
您需要转换 中的元素.work，而不是.work自身。
这是图像轮播的小型工作版本：（
也可作为JSFiddle 使用）
class Slider {
constructor(el) {
this.el = el;
this.activeIndex = 0;
this.numItems = this.el.children().length;
// automatically advance slider
this.interval = setInterval(() => this.next(), 5000);
}
prev() {
this.activeIndex--;
if(this.activeIndex < 0)
this.activeIndex = this.numItems - 1;
this.updateDom();
}
next() {
this.activeIndex++;
if(this.activeIndex >= this.numItems)
this.activeIndex = 0;
this.updateDom();
}
updateDom() {
this.el.children().css('transform', `translateX(-${this.activeIndex}00%)`)
}
}
$(() => {
let slider = new Slider($(".work"));
$(".prev").click(() => slider.prev());
$(".next").click(() => slider.next());
});.work {
/* Specify the size of the image box (can be in any unit you want)*/
width: 500px;
height: 300px;
overflow: hidden;
display: flex;
}
img {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
will-change: transform;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="work">
<img src="https://picsum.photos/500/300?1">
<img src="https://picsum.photos/500/300?2">
<img src="https://picsum.photos/500/300?3">
<img src="https://picsum.photos/500/300?4">
<img src="https://picsum.photos/500/300?5">
</div>
<button type="button" class="prev">
PREV
</button>
<button type="button" class="next">
NEXT
</button>不过，对于生产用途，我建议使用现有的库。
仅举几例：
编辑：继承人
的工作JsFiddle与您的代码。
推荐阅读
- xpath - 如何使用 IMPORTXML 提取带有/不带有 ALT 和标题标签的图像列表？
- javascript - 如何在 knex.js 中加入外部表条目的计数？
- python - Python连接多个已知扩展名'str'对象的大文件没有属性'read'
- python - driver.press_keycode(84)：全局名称“驱动程序”未定义
- sharepoint - LinkedIn API 不工作，返回错误：HTTP GET - 远程服务器返回错误：（410）消失
- python - 如何在 Python 中以递归方式使用运行长度编码
- javascript - BrowserFS没有将数据写入文件？
- onelogin - 从 dotnetcore 应用程序注销，由 onelogin 使用 oauth 进行身份验证
- php - 在 laravel 4.2 中登录后如何重定向？
- c# - 使用 ASPNETCORE_ENVIRONMENT 在 Azure 上覆盖 appsettings.json