如何在按下一個幻燈片按鈕時將幻燈片從屏幕上移開？

Question

我在工作的頁面上有一個視頻滑塊，但我希望在更改幻燈片時發生不錯的動畫，而不僅僅是轉到下一張幻燈片。例如，從屏幕側面滑動滑塊並從另一側滑入下一個滑塊。

var slideIndex = 1; 
 
\t \t showDivs(slideIndex); 
 

 
\t \t function plusDivs(n) { 
 
    \t \t \t showDivs(slideIndex += n); 
 
\t \t } 
 

 
\t \t function showDivs(n) { 
 
    \t \t \t var i; 
 
    \t \t \t var x = document.getElementsByClassName("mySlides"); 
 
    \t \t \t if (n > x.length) {slideIndex = 1}  
 
    \t \t \t if (n < 1) {slideIndex = x.length} 
 
    \t \t \t \t for (i = 0; i < x.length; i++) { 
 
     \t \t \t \t \t x[i].style.display = "none"; 
 
    \t \t \t \t } 
 
    \t \t \t x[slideIndex-1].style.display = "block"; 
 
\t \t }

<div class="video__container" style="display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row;"> 
 
\t \t \t <div class="arrow__container"> 
 
\t \t \t \t <div class="video__container--arrow arrow__back" onclick="plusDivs(-1)"> 
 
\t \t \t \t \t <img class="img__full" src="css/images/template_arrow.svg"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t 
 
\t \t \t <div class="video__container--item"> 
 
\t \t \t \t <!-- Must include data-id, data-bg and optional video name --> 
 
\t \t \t \t <div class="video__slide mySlides"> 
 
\t \t \t \t \t <div class="youtube-container template-youtube-container"> 
 
\t \t  \t \t \t \t <div class="youtube-player" data-id="bqlzoxTvOkE" data-bg="css/images/pb/video1.jpg"><span class="video-name">Branding</span></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="video__slide mySlides"> 
 
\t \t \t \t \t <div class="youtube-container template-youtube-container"> 
 
\t \t  \t \t \t \t <div class="youtube-player" data-id="S-sJp1FfG7Q" data-bg="css/images/pb/video2.jpg"><span class="video-name">UX Design</span></div> 
 
\t \t \t \t \t </div> 
 
    \t \t \t \t </div> 
 
    \t \t \t \t <div class="video__slide mySlides"> 
 
\t \t \t \t \t <div class="youtube-container template-youtube-container"> 
 
\t \t  \t \t \t \t <div class="youtube-player" data-id="zVntJ21thpQ" data-bg="css/images/pb/video3.jpg"><span class="video-name">UI Design</span></div> 
 
\t \t \t \t \t </div> 
 
    \t \t \t \t </div> 
 

 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="arrow__container"> 
 
\t \t \t \t <div class="video__container--arrow arrow__next" onclick="plusDivs(1)"> 
 
    \t \t \t \t \t <img class="img__full" src="css/images/template_arrow.svg"> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
\t \t </div>

Answer 1

好了，是啊，這是一個很大，但我們在這裏做的是避免JavaScript的緩動動畫。如果您確實想要使用緩動，請使用以下鏈接，因爲我無法像這樣解釋它。 https://www.kirupa.com/html5/introduction_to_easing_in_javascript.htm 如果你仍然想跳過整個緩解的學習過程（像我一樣），有一種解決方法。 我會給你簡短的版本，如果你仍然困惑，我有一個很好的例子。首先，你必須製作一個div容器來放置你的幻燈片。基本上，您將使用JavaScript函數爲該容器分配一個類。除了第一個和最後一個（每個向前，一個向後），每個幻燈片都會製作兩個。當你這樣做時，確保通過分配另一個類來充當null來重置動畫，否則...你剛剛做的那些類將保存動畫，除了在空類中。添加你的動畫，一些樣式和html，確保包含一個帶有早期功能的按鈕。我的確很基本，但是你可以根據自己的需要真正裝飾它。

/*This is the Javascript. What we are doing here is bypassing the complexity of 
 
Javascript animations and instead changing the class of what we want to move. 
 
This allows us to still use the onclick function in our html, while at 
 
the same time using css3 animations*/ 
 
function magicbtnf() { 
 
    document.getElementById('container').className = "magicslide"; 
 
} 
 

 
function magicbtnb() { 
 
    document.getElementById('container').className = "magicslide2"; 
 
}

/*This is css. Most of it is styling, but I will point out importants in 
 
comments.*/ 
 

 
body, 
 
html { 
 
    width: 100%; 
 
    margin: 0; 
 
    border: 0; 
 
    font-family: "century gothic", "Arial"; 
 
    font-size: 18px; 
 
} 
 

 
#container { 
 
    /*This is the container, make it 100% x the number of slides you have. 
 
\t This will allow each slide to fill 100% of the screen*/ 
 
    width: 200%; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    display: flex; 
 
} 
 

 
#container>div { 
 
    display: inline-block; 
 
    text-align: center; 
 
    vertical-align: top; 
 
} 
 

 
#slide1 { 
 
    /* You can insert your first slide CSS in here , just make sure the width 
 
\t is 1/the amount of slides you have. % is recommended, but I'm sure there 
 
\t is a way to use vw.*/ 
 
    height: 400px; 
 
    width: 50%; 
 
    background-color: red; 
 
    float: right; 
 
    position: relative; 
 
} 
 

 
.magicslide { 
 
    /*This is one of two classes for the animation. We will use javascript to 
 
\t set and unset the classes to the slides*/ 
 
    -webkit-animation: switch 4s 1; 
 
    -o-animation: switch 4s 1; 
 
    -moz-animation: switch 4s 1; 
 
    animation: switch 4s 1; 
 
    animation-fill-mode: forwards; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz-animation-fill-mode: forwards; 
 
    -o-animation-fill-mode: forwards; 
 
} 
 

 
@-moz-keyframes switch { 
 
    0% { 
 
    margin-left: 0px; 
 
    } 
 
    25% { 
 
    margin-left: 0px; 
 
    } 
 
    50% { 
 
    margin-left: -60%; 
 
    } 
 
    100% { 
 
    margin-left: -100%; 
 
    } 
 
} 
 

 
@-o-keyframes switch { 
 
    0% { 
 
    margin-left: 0px; 
 
    } 
 
    25% { 
 
    margin-left: 0px; 
 
    } 
 
    50% { 
 
    margin-left: -60%; 
 
    } 
 
    100% { 
 
    margin-left: -100%; 
 
    } 
 
} 
 

 
@-webkit-keyframes switch { 
 
    0% { 
 
    margin-left: 0px; 
 
    } 
 
    25% { 
 
    margin-left: 0px 
 
    } 
 
    50% { 
 
    margin-left: -60%; 
 
    } 
 
    100% { 
 
    margin-left: -100%; 
 
    } 
 
} 
 

 
@keyframes switch { 
 
    0% { 
 
    margin-left: 0px; 
 
    } 
 
    25% { 
 
    margin-left: 0px 
 
    } 
 
    50% { 
 
    margin-left: -60%; 
 
    } 
 
    100% { 
 
    margin-left: -100%; 
 
    } 
 
} 
 

 
.notsomagic { 
 
    /*This is basically a void element. This resets the animation so when 
 
\t you go back a slide, you can continue again.*/ 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 

 
#slide2 { 
 
    /*Same thing here as the earlier slide!*/ 
 
    height: 400px; 
 
    width: 50%; 
 
    background-color: lightblue; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.magicslide2 { 
 
    /*This is the same animation sequence as before, but backwards*/ 
 
    -webkit-animation: switchb 4s 1; 
 
    -o-animation: switchb 4s 1; 
 
    -moz-animation: switchb 4s 1; 
 
    animation: switchb 4s 1; 
 
    animation-fill-mode: forwards; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz-animation-fill-mode: forwards; 
 
    -o-animation-fill-mode: forwards; 
 
} 
 

 
@keyframes switchb { 
 
    0% { 
 
    margin-left: -100%; 
 
    } 
 
    25% { 
 
    margin-left: -100%; 
 
    } 
 
    50% { 
 
    margin-left: -40% 
 
    } 
 
    100% { 
 
    margin-left: 0%; 
 
    } 
 
} 
 

 
@-moz-keyframes switchb { 
 
    0% { 
 
    margin-left: -100%; 
 
    } 
 
    25% { 
 
    margin-left: -100%; 
 
    } 
 
    50% { 
 
    margin-left: -40% 
 
    } 
 
    100% { 
 
    margin-left: 0%; 
 
    } 
 
} 
 

 
@-o-keyframes switchb { 
 
    0% { 
 
    margin-left: -100%; 
 
    } 
 
    25% { 
 
    margin-left: -100%; 
 
    } 
 
    50% { 
 
    margin-left: -40% 
 
    } 
 
    100% { 
 
    margin-left: 0%; 
 
    } 
 
} 
 

 
@-webkit-keyframes switchb { 
 
    0% { 
 
    margin-left: -100%; 
 
    } 
 
    25% { 
 
    margin-left: -100%; 
 
    } 
 
    50% { 
 
    margin-left: -40% 
 
    } 
 
    100% { 
 
    margin-left: 0%; 
 
    } 
 
}

<!--This is just some boring old html. It's esentially placing everything where it needs to go. The most noticable part is the input, which states our function from the javascript onclick --> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Slide</title> 
 
    <link rel="stylesheet" type="text/css" href="change_slides.css"> 
 
    <script type="text/javascript" src="change_slides.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div id="slide1"> 
 
     Hello! This is my slideshow! 
 
     <br> 
 
     <input type="button" id="change" value="Click Me!" onclick="magicbtnf()"> 
 
    </div> 
 
    <div id="slide2"> 
 
     This is slide #2! 
 
     <br> 
 
     <input type="button" id="change2" value="Click Me Too!" onclick="magicbtnb()"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

如果你不喜歡自己製作的動畫，也有免費下載。我推薦Animate.css。它的粉筆中充滿了非常流暢的動畫，並且通過幾次快速編輯，您可以使它們與幻燈片效果非常好。鏈接是：https://daneden.github.io/animate.css/ 我希望這可以幫助！ ：d