文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用CSS-Grid和javascript制作图像幻灯片

问如何使用CSS-Grid和javascript制作图像幻灯片
EN

Stack Overflow用户

提问于 2019-08-16 18:28:46

回答 1查看 4.4K关注 0票数 1

我试着用图片制作幻灯片。但是它似乎不起作用，我在检查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>

javascript

html

css

css-grid

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-16 18:57:34

您需要转换.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与您的代码。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57529475

复制

相似问题

问如何使用CSS-Grid和javascript制作图像幻灯片
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS-Grid和javascript制作图像幻灯片EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS-Grid和javascript制作图像幻灯片
EN