Question

我目前正在开发一个网站项目，我已经使用在线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图像应该淡入。
更改时图像应向左滑动。

Answer 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%";
}

您可以使用相同的技巧在left属性中使用CSS中的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%'">

如何将转换添加到当前的JavaScript代码？

1 个答案: