如何向我当前的 JavaScript 代码添加过渡？答案

【问题标题】：How do i add transitions to my current JavaScript code?如何向我当前的 JavaScript 代码添加过渡？
【发布时间】：2016-03-13 06:13:00
【问题描述】：

我目前正在做一个网站项目，我已经使用在线 YouTube tutorial 为滑块整理了这段代码 (JavaScript)。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">

        <script   src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript">
            var imagecount = 1;
            var total = 2;

            function slide (x){
                var Image = document.getElementById('img');
                imagecount = imagecount + x;
                if(imagecount > total){imagecount = 1;}
                if(imagecount < 1){imagecount = total;}
                Image.src = "images/img"+ imagecount +".png";
            }

            window.setInterval(function slideA () {
                var Image = document.getElementById('img');
                imagecount = imagecount + 1;
                if(imagecount > total){ imagecount = 1;}
                if(imagecount < 1){ imagecount = total;}
                Image.src = "images/img"+ imagecount +".png";
            },5000);

        </script>
    </head>
    <title></title>
        <body onload="slideA()" >

        <div id="container">
            <div id="header">
             <div id="logo">
                <img src="big states.png" alt="Logo">
            </div>
            </div>

            <div id="nav">
                <ul> 
                    <li><a class="active" href="#home">HOME</a></li>
                    <li><a href="#menu">MENU</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#gallery">GALLERY</a></li>
                    <li><a href="#reviews">REVIEWS</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                 </ul>
            </div>
        </div>

        <div id="bgimg">
            <img src="sliderbackground.jpg">
        </div>    
        <div class="slidercontainer">
            <img src="images/img1.png" id="img">   
                <div id="arrow-right"><img href="#" onclick="slide(1)"     src="arrow-right.png" class="right" onmouseover="this.src='right-hover.png';"     onmouseout="this.src='arrow-right.png';" />  </div>
                <div id="arrow-left"><img href="#" onclick="slide(-1)"     src="arrow-left.png" class="left" onmouseover="this.src='left-hover.png';"     onmouseout="this.src='arrow-left.png';" />  </div>

        </div>

    </body>
</html>

然而本教程没有展示如何将过渡添加到滑块中，这正是我需要帮助的地方。

我正在寻找两种过渡效果：

OnLoad 图像应淡入。
更改时图像应向左滑动。

【问题讨论】：

请留下 youtube 教程的链接。
youtube.com/watch?v=7DcoiLed2iY
投反对票有什么意义，如果你甚至不打算投入 cmets 为什么？ OP 对 SO 来说是新手，为什么不尝试提供帮助！巨魔

标签： javascript html

【解决方案1】：

看看 css 过渡和/或动画。

您可以像这样更新 Javascript 代码中的 css：

CSS

#img {
    /* Initialize with 0% opacity (invisible) */
    opacity: 0%;

    /* Use prefix for cross browser compatibility */
    transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
}

Javascript

Image.onload = function(){
    this.style.opacity = "100%";
}

您可以使用相同的技术在 CSS 中使用 left 属性和 relative 位置滑动。

将其添加到代码中

var imagecount = 1;
var total = 2;

function slide (x){
    var Image = document.getElementById('img');
    imagecount = imagecount + x;
    if(imagecount > total){imagecount = 1;}
    if(imagecount < 1){imagecount = total;}
    Image.src = "images/img"+ imagecount +".png";

    Image.style.opacity = "0%"; // Reset the opacity to 0% when reloading the image !
}

window.setInterval(function slideA () {
    var Image = document.getElementById('img');
    imagecount = imagecount + 1;
    if(imagecount > total){ imagecount = 1;}
    if(imagecount < 1){ imagecount = total;}
    Image.src = "images/img"+ imagecount +".png";

    Image.style.opacity = "0%"; // Reset the opacity to 0% when reloading the image !
},5000);

然后简单的添加到html节点中：

<img src="images/img1.png" id="img" onload="this.style.opacity = '100%'">

【讨论】：

感谢您的回复，添加 CSS 和 JavaScript 代码后，预览滑块时仍然没有任何更改。关于 JavaScript，它将被放置在代码中的当前脚本标签中吗？
@CodingJunkie 这肯定是个问题，因为您的浏览器缓存了图像，因此不会调用 onload 函数。看看这个解决问题的技巧stackoverflow.com/a/5933319/4760242
谢谢你，但是在我自己的代码示例中更改提供的代码方面仍然有点失落。