关于切换js背景图的一个问题

问题在这里:

        我想点击切换背景图片,改变背景图片的路径,具体在下面js代码的注释中
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
 *{margin:0; padding:0; list-style:none;}
html,body,#main{ width:100%; height:100%;} 
 #main{background-i`请输入代码`mage:url(img/skin/320.jpg);
background-repeat:no-repeat;
background-size:cover;}
.list{ position:absolute; top:0; opacity:0.5;}
.list li{ width:260px; height:163px; margin-left:4px; float:left;}
</style>
</head>

<body>
<div id="main">
    <ul class="list">
        <li><img src="img/static/320.jpg" width="260" height="163" /></li>
        <li><img src="img/static/321.jpg" width="260" height="163" /></li>
        <li><img src="img/static/322.jpg" width="260" height="163" /></li>
        <li><img src="img/static/323.jpg" width="260" height="163" /></li>
        <li><img src="img/static/324.jpg" width="260" height="163" /></li>
        <li><img src="img/static/325.jpg" width="260" height="163" /></li>
    </ul>
</div>
</body>
</html>
<script>
var oMian=document.getElementById("main");
var aLi=document.getElementsByTagName("li");
for(i=0,l=aLi.length;i<l;i++){
    (function(n){
        aLi[n].onclick=function(){
            console.log(n);
            
            console.log(aLi[n].children[0].getAttribute("src")); 
           
             ***/*这里为什么会打印出绝对路径*/
            // 还有把getAtribute换成src ,为什么会打印出绝对路径?然后是,点击之后背景图片没有效果?***
            

            /*children[0]这样写*/
         // 返回函数不要引用任何循环变量,或者后续会发生变化的变量。
         oMian.style.backgroundImage = "url(aLi[n].children[0].getAttribute('src'))"; /*后面加引号*/
        oMian.style.backgroundSize = "cover";
        
    }

    })(i);
}

</script>
阅读 3.6k
2 个回答

console.log(oMian.style.backgroundImage);始终得到的是第一个图片的地址,不知道怎么回事

oMian.style.backgroundImage = "url("+aLi[n].children[0].getAttribute('src')+")";这样才显示背景图,至于src为什么是绝对路径,这得问js的创始人呀,顺便帮我问问.getAttribute('src')为什么是相对路径(∩_∩)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题