图片切换和修改背景
图片切换:
<!doctype>
<html>
<head><meta charset="utf-8"/><style type="text/css">#content{width: 400px;height:400px;border:10px solid #0CC;margin:40px auto 0; position:relative;
}#content a{width:40px;height:40px;background:#000;border:5px solid #fff;position:absolute;top:175px;text-align:center;text-decoration:none;line-height:40px;color:#fff;font-size:30px;font-weight:bold;
}#prev{left:10px; }#next{right:10px;
}
#text{position:absolute;margin:0;bottom:0;left:0;width:400px;height:30px;line-height:30px;text-align:center;color:#FFF;background:#000;}
#span1{position:absolute;margin:0;top:0;left:0;width:400px;height:30px;line-height:30px;text-align:center;color:#FFF;background:#000;
}
#img1{width:400px;height:400px;
}</style>
</head><body><div id="content"><a id="prev" href="javascript:;" onClick="prevOnclik()"><</a><a id="next" href="javascript:;" onClick="nextOnclik()">></a><p id="text">图片文字加载中</p><span id="span1">数量正在计算中</span><img id="img1" src="img\1.jpg"/></div></body><script type="text/javascript">var prevBtn=document.getElementById("prev");var nextBtn=document.getElementById("next");var text1=document.getElementById("text");var span1=document.getElementById("span1");var img1=document.getElementById("img1");//初始化数据var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];var textArr=["Num1","Num2","Num3","Num3"];var num=0;window.οnlοad=function(){//执行初始化img1.src=imgArr[num];span1.innerHTML=num+1+"/"+imgArr.length;text1.innerHTML=textArr[num];
}prevBtn.οnclick=function prevOnclik(){num--;if(num<0||num==0){num=0;}resetData(num);
}function nextOnclik(){num++;if(num>3||num==3){//所谓的循环，还是顺序查看，主要就是在这里给num重新设置数值的问题// 循环:num=0;//顺序和循环两个按钮就可以看作两个布尔数值，然后判断false或true的问题;num=3;}resetData(num);
}//重设函数function resetData(getNum){img1.src=imgArr[getNum];span1.innerHTML=getNum+1+"/"+imgArr.length;text1.innerHTML=textArr[getNum]; }
</script></html>
修改背景，利用js弹出层:
<!doctype>
<html>
<head><meta charset="utf-8"/><style type="text/css">#Odiv{width:50px;height:50px;background-color:#03F;position:absolute;top:100px;left:60px;}</style>
</head><body><h3>请为下面的蓝色DIV设置样式:</h3> <input type="button" id="Obutton" value="点击设置" style="background-color:#F33" onClick="abc()"/><div id="Odiv"></div>
</body><script>function abc(){//得到元素
var Odvi=document.getElementById("Odiv");//弹出层参数:
var bordercolor = "#666699"; // 提示窗口的边框颜色
var bgcolor = "#FFFFFF"; // 提示内容的背景色
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
//创建背景层:
var bgobj =document.createElement("div"); //弹出层
//背景设置:
bgobj.style.cssText= "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgobj); //弹出层上的Div设置:
var msgObj=document.createElement("div");
msgObj.style.cssText =
"position:absolute;font:11px '宋体';top:"+(iHeight-200)/2+"px;left:"+(iWidth-600)/2+"px;width:"+600+"px;height:"+150+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild(msgObj); //内容设置:
var selectBgColorBtn=document.createElement("input");
msgObj.appendChild(selectBgColorBtn);
selectBgColorBtn.type="button";
selectBgColorBtn.value="请选择颜色:";
selectBgColorBtn.style.position="absolute";
selectBgColorBtn.style.left="100px";var redBtn=document.createElement("button");
msgObj.appendChild(redBtn);
redBtn.style.backgroundColor="red";
redBtn.style.width="20px";
redBtn.style.height="20px";
redBtn.οnclick=function redClick(){var Odvi=document.getElementById("Odiv");alert("<><"); Odvi.style.backgroundColor="yellow";}}
</script>
</html>
图片切换和修改背景
图片切换:
<!doctype>
<html>
<head><meta charset="utf-8"/><style type="text/css">#content{width: 400px;height:400px;border:10px solid #0CC;margin:40px auto 0; position:relative;
}#content a{width:40px;height:40px;background:#000;border:5px solid #fff;position:absolute;top:175px;text-align:center;text-decoration:none;line-height:40px;color:#fff;font-size:30px;font-weight:bold;
}#prev{left:10px; }#next{right:10px;
}
#text{position:absolute;margin:0;bottom:0;left:0;width:400px;height:30px;line-height:30px;text-align:center;color:#FFF;background:#000;}
#span1{position:absolute;margin:0;top:0;left:0;width:400px;height:30px;line-height:30px;text-align:center;color:#FFF;background:#000;
}
#img1{width:400px;height:400px;
}</style>
</head><body><div id="content"><a id="prev" href="javascript:;" onClick="prevOnclik()"><</a><a id="next" href="javascript:;" onClick="nextOnclik()">></a><p id="text">图片文字加载中</p><span id="span1">数量正在计算中</span><img id="img1" src="img\1.jpg"/></div></body><script type="text/javascript">var prevBtn=document.getElementById("prev");var nextBtn=document.getElementById("next");var text1=document.getElementById("text");var span1=document.getElementById("span1");var img1=document.getElementById("img1");//初始化数据var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];var textArr=["Num1","Num2","Num3","Num3"];var num=0;window.οnlοad=function(){//执行初始化img1.src=imgArr[num];span1.innerHTML=num+1+"/"+imgArr.length;text1.innerHTML=textArr[num];
}prevBtn.οnclick=function prevOnclik(){num--;if(num<0||num==0){num=0;}resetData(num);
}function nextOnclik(){num++;if(num>3||num==3){//所谓的循环，还是顺序查看，主要就是在这里给num重新设置数值的问题// 循环:num=0;//顺序和循环两个按钮就可以看作两个布尔数值，然后判断false或true的问题;num=3;}resetData(num);
}//重设函数function resetData(getNum){img1.src=imgArr[getNum];span1.innerHTML=getNum+1+"/"+imgArr.length;text1.innerHTML=textArr[getNum]; }
</script></html>
修改背景，利用js弹出层:
<!doctype>
<html>
<head><meta charset="utf-8"/><style type="text/css">#Odiv{width:50px;height:50px;background-color:#03F;position:absolute;top:100px;left:60px;}</style>
</head><body><h3>请为下面的蓝色DIV设置样式:</h3> <input type="button" id="Obutton" value="点击设置" style="background-color:#F33" onClick="abc()"/><div id="Odiv"></div>
</body><script>function abc(){//得到元素
var Odvi=document.getElementById("Odiv");//弹出层参数:
var bordercolor = "#666699"; // 提示窗口的边框颜色
var bgcolor = "#FFFFFF"; // 提示内容的背景色
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
//创建背景层:
var bgobj =document.createElement("div"); //弹出层
//背景设置:
bgobj.style.cssText= "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgobj); //弹出层上的Div设置:
var msgObj=document.createElement("div");
msgObj.style.cssText =
"position:absolute;font:11px '宋体';top:"+(iHeight-200)/2+"px;left:"+(iWidth-600)/2+"px;width:"+600+"px;height:"+150+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild(msgObj); //内容设置:
var selectBgColorBtn=document.createElement("input");
msgObj.appendChild(selectBgColorBtn);
selectBgColorBtn.type="button";
selectBgColorBtn.value="请选择颜色:";
selectBgColorBtn.style.position="absolute";
selectBgColorBtn.style.left="100px";var redBtn=document.createElement("button");
msgObj.appendChild(redBtn);
redBtn.style.backgroundColor="red";
redBtn.style.width="20px";
redBtn.style.height="20px";
redBtn.οnclick=function redClick(){var Odvi=document.getElementById("Odiv");alert("<><"); Odvi.style.backgroundColor="yellow";}}
</script>
</html>