初心者跟着慕课教程学了几天javascript基础,于是想做个图片切换的效果,可是写了一堆代码,背景图片就是加载不进来;## 标题文字 ##请输入代码
*{
margin:0;
padding:0;
text-decoration:none;
}
#content{
width:700px;
height:500px;
background-color:pink;
margin:auto;
border-radius:50px;
position:relative;
top:50px;
}
a{
display:block;
width:50px;
height:20px;
font-size:14px;
color:black;
text-align:center;
position:absolute;
top:240px;
opacity:0.5;
}
a:hover{
opacity:0.9;
color:red;
}
#prev{
left:20px;
}
#next{
right:20px;
}
#pictures{
width:500px;
height:400px;
position:absolute;
top:50px;
left:100px;
border:1px solid green;
}
#text1,#text2{
width:500px;
height:20px;
font-size:16px;
text-align:center;
background-color:#ccc;
position:absolute;
}
#text1{
top:0;
}
#text2{
bottom:0;
}
window.onload=function(){
var oPrev=document.getElementById("prev");
var oNext=document.getElementById("next");
var oSpan=document.getElementById("text1");
var oPictures=document.getElementById("pictures");
var oText=document.getElementById("text2");
var arrUrl=["images/pic1.png","images/pic2.png","images/pic3.png","images/pic4.png","images/pic5.png","images/pic6.png"];
var arrText=["少女の美しさ","心の絆","雨と泪","紫の夢","水上の蝶","賑やかな風景"];
var i=0;
function begin(){
oSpan.innerHTML = i + 1 + "/" + arrText.length;
oPictures.style.backgroundImage = arrUrl[i];
oText.innerHTML = arrText[i];
}
begin();
oPrev.onclick=function prev(){
i--;
if(i==-1){
alert("已经是第一张啦");
i=0;
}
begin();
}
oNext.onclick=function next(){
i++;
if(i==6)
{
alert("已经是最后一张啦");
i=arrUrl.length-1;
}
begin();
}
}
<-prev
next->
图片序号正在计算中
图片文字正在加载中
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
帮你看了,JavaScript代码最后少了一个大括号~
oPictures.style.backgroundImage = 'url('+arrUrl[i]+')';楼下所言极是,我忘了弄变量了...
oPictures.style.backgroundImage = "url("+arrUrl[i]+")";
应该是这样子才对。