图片切换和修改背景

Cb123456

浏览: 63773 次
性别:
来自: 西安

最近访客更多访客>>

没什么结局

zzgiser

_Amazing

泪痕崔

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

图片切换:

<!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.onload=function(){
	  //执行初始化
	img1.src=imgArr[num];
	span1.innerHTML=num+1+"/"+imgArr.length;
	text1.innerHTML=textArr[num];    
}
  
  prevBtn.onclick=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.onclick=function redClick(){
	
var Odvi=document.getElementById("Odiv");
   alert("<><");	
	Odvi.style.backgroundColor="yellow";
	
	
	}
	  
}
</script>
</html>

分享到：