更改元素背景img的Javascript幻灯片_Javascript_Css

更改元素背景img的Javascript幻灯片

javascript css

更改元素背景img的Javascript幻灯片,javascript,css,Javascript,Css,尝试制作利用背景图像：属性的幻灯片。这是我到目前为止所拥有的 <div id="headerContent"> <div id="rightArrow"></div> <div id="leftArrow"></div> </div><!-- end of h

尝试制作利用背景图像：属性的幻灯片。这是我到目前为止所拥有的

<div id="headerContent">
        <div id="rightArrow"></div><!-- end of rightArrow-->
        <div id="leftArrow"></div><!-- end of leftArrow-->
    </div><!-- end of headerContent-->

document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');

document.getElementById("rightArrow").addEventListener("click", changeImageRight);


function changeImageRight () {
    var i = 0;

    if(i == 0) {
        document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');
        i++;
    }
    else if (i == 1)
     {
        document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-2.png) no-repeat !important');
        i++;
    }
    else if (i == 2) {
        document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-3.png) no-repeat !important');
        i++;
    }
    else {
        document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');
        i++;
    }

}


document.getElementById（“headerContent”）.setAttribute（'style'，'background:url（images/home-header-1.png）不重复！重要'）；
document.getElementById（“rightArrow”）.addEventListener（“单击”，changeImageRight）；
函数changeImageRight（）{
var i=0；
如果（i==0）{
document.getElementById（“headerContent”）.setAttribute（'style'，'background:url（images/home-header-1.png）不重复！重要'）；
i++；
}
else如果（i==1）
{
document.getElementById（“headerContent”）.setAttribute（'style'，'background:url（images/home-header-2.png）不重复！重要'）；
i++；
}
else如果（i==2）{
document.getElementById（“headerContent”）.setAttribute（'style'，'background:url（images/home-header-3.png）不重复！重要'）；
i++；
}
否则{
document.getElementById（“headerContent”）.setAttribute（'style'，'background:url（images/home-header-1.png）不重复！重要'）；
i++；
}
}

如您所见，我增加I++以更改背景图像。然而，就目前情况而言，这没有任何作用，也没有显示任何图像。而且我还包括了！重要属性，因为这是我在开始时显示占位符img的唯一方法。

问题在于您在

changeImageRight

方法中声明索引变量

。这意味着每次调用该方法时，

总是设置为

您希望在每次调用

changeImageRight

之间保持

的值。为此，只需在函数外部声明变量。您可以通过移动行

var i=0函数changeImageRight（）{

将代码>置于行上方，也许您应该这样想：
var changeImageRight = (function(){
  var i = 0;
  return function(){
    // better code than you wrote here 
    // now you can expect i to hold scope
  }
}());

<html>
<head>
<script>
    //GLOBAL DECLARATION
    var i = 0;

    document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');

    document.getElementById("rightArrow").addEventListener("click", changeImageRight);


    function changeImageRight () {

        if(i == 0) {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');
            i++;
        }
        else if (i == 1)
         {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-2.png) no-repeat !important');
            i++;
        }
        else if (i == 2) {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-3.png) no-repeat !important');
            i++;
        }
        else {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');
            i++;
        }

    } 
</script>
</head>
<body>
    <div id="headerContent">
            <div id="rightArrow"></div><!-- end of rightArrow-->
            <div id="leftArrow"></div><!-- end of leftArrow-->
    </div><!-- end of headerContent-->
</body>
</html>

您只需要全局声明变量i。

像这样：
var changeImageRight = (function(){
  var i = 0;
  return function(){
    // better code than you wrote here 
    // now you can expect i to hold scope
  }
}());

<html>
<head>
<script>
    //GLOBAL DECLARATION
    var i = 0;

    document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');

    document.getElementById("rightArrow").addEventListener("click", changeImageRight);


    function changeImageRight () {

        if(i == 0) {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');
            i++;
        }
        else if (i == 1)
         {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-2.png) no-repeat !important');
            i++;
        }
        else if (i == 2) {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-3.png) no-repeat !important');
            i++;
        }
        else {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');
            i++;
        }

    } 
</script>
</head>
<body>
    <div id="headerContent">
            <div id="rightArrow"></div><!-- end of rightArrow-->
            <div id="leftArrow"></div><!-- end of leftArrow-->
    </div><!-- end of headerContent-->
</body>
</html>


//全球宣言
var i=0；
document.getElementById（“headerContent”）.setAttribute（'style'，'background:url（images/home-header-1.png）不重复！重要'）；
document.getElementById（“rightArrow”）.addEventListener（“单击”，changeImageRight）；
函数changeImageRight（）{
如果（i==0）{
document.getElementById（“headerContent”）.setAttribute（'style'，'background:url（images/home-header-1.png）不重复！重要'）；
i++；
}
else如果（i==1）
{
document.getElementById（“headerContent”）.setAttribute（'style'，'background:url（images/home-header-2.png）不重复！重要'）；
i++；
}
else如果（i==2）{
document.getElementById（“headerContent”）.setAttribute（'style'，'background:url（images/home-header-3.png）不重复！重要'）；
i++；
}
否则{
document.getElementById（“headerContent”）.setAttribute（'style'，'background:url（images/home-header-1.png）不重复！重要'）；
i++；
}
} 

我使用了内部JavaScript。如果有，您可以将此JavaScript放在外部JS文件中。
函数的第一行将本地I
变量设置为0
，因此只有第一个if
条件可以为真。document.getElementById（“headerContent”）.style.backgroundImage=“url（images/home-header-1.png）
设置style属性将完全覆盖它，就像.cssText
一样。您应该使用元素.style.background
。只需一条注释。自增函数看起来更像var count=（function（）{var c=0；return function（）{return return++c；}（））；