`

js 图片轮换样例

javascript 
阅读更多

 

 

<!doctype html>
<title>javascript</title>
<meta charset="utf-8"/>
 <style type="text/css">
<!--
	dd a,nohover{
		background:   url("page_button.gif") ;
		background-repeat: no-repeat;
		background-attachment:scroll;
		background-position: -15px 0; 
		float:right;
		width:15px;
		margin-right: 8px;
		text-align: center;
 		text-decoration: none;
 		cursor: pointer;
 		line-height: 15px;
	}
	
	.hover{
		background-position: 0 0; 
	}
-->
</style>
<h4>javascript图片轮换  </h4>

 
 <dl style="position:relative;width: 460px;height:336px;border:solid 10px #009900;overflow: hidden;">
  <dt id="changePic" style="overflow: hidden;margin: 0px;padding: 0px">
 		<img id="index11"  alt="云的浪漫" src="1.jpg" type="changeImg">
 		<img id="index12" alt="夕阳与你我" src="2.jpg" type="changeImg">
 		<img id="index13" alt="朝阳" src="3.jpg" type="changeImg">
  </dt> 
  <dd  id="tip2"  style="margin:0px;position: absolute;left: 18px;top: 753px;width:400px;height:50px; color:#fff;background:blue;size: 30px;  padding-left: 20px; line-height: 45px;">
  </dd>
  <dd id="page" style="position: absolute;left:0px;top:304px; top:304px;right:0px;">
  	<a id="img3" imgTarget="3">3</a>  <a  imgTarget="2" id="img2">2</a>  <a  imgTarget="1" id="img1"  class="hover">1</a>   
  </dd>
</dl>
 
 
 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

 

 

 

<script type="text/javascript">
 
    // 图片区域只显示一张图片，其余图片都是溢出隐藏来控制的 overflow: hidden;来控制的
  
    var img1 = document.getElementById('index11'); //显示在外面的图片 
    var outId  = document.getElementById("changePic"); 
    
    var imgs = findChildred(outId);//图片数组
    //图片保存的位置
    var imgsTemp=[] ;
    //图片换个保存的地方
	for(var i=0;i<imgs.length;i++  ){
		var imgJson = {};
  		imgJson.src = imgs[i].getAttribute('src');
  		imgJson.alt = imgs[i].getAttribute('alt');
  		imgsTemp.push(imgJson  )
	}
  	//更改图片	
    changePicture(img1, imgsTemp);
  
  
  /**
  	*作用不断乱换显示图片
  	* changeImg 图片组总显示的那个图片
  	* imgs 图片组 
  */
  document.imgIndex = 0 ;
  function changePicture( changeImg ,  imgs ){
	  (function(){
		  setTimeout(function(){
 				
			   if((document.imgIndex+1) ==imgs.length || (document.imgIndex+1)<0 ){
				   document.imgIndex= 0 ;
			   }else{
				   document.imgIndex++; 
			   }
			   changeImg.src = imgs[document.imgIndex].src;
			   var selectImg = document.getElementById( 'img'+(document.imgIndex+1));
			   changeSelectPage(selectImg);
			   //每次初始化滚动的 tip
			   initTip(imgs,document.imgIndex  );
			   
			   setTimeout( arguments.callee ,2200 );//每次重新调用 setTimeout这个函数 更改图片
			    
		   },2200)
	  })();
  }

  //查找孩子节点的方法 
  function findChildred(domEle){
  	var children = [] ; 
      var nodes = domEle.childNodes;
      for(var i=0  ;i<nodes.length ;i++ ){
      	if(nodes[i].nodeType==1){//如果是元素节点
      		children.push(nodes[i]);
      	}
      }
      return children;
  }

  //查找当前节点的父节点 （文档层次w3c ）    参数为dom对象
  function findParentNode(domEle){
	  if(domEle && domEle.parentNode){
		  if(domEle.parentNode.nodeType==1){
			  return domEle.parentNode;
		  }else{
			  return findParentNode(domEle.parentNode)
		  }
	  }else{
		  return null;
	  }
  }
  
  //对象的移动 
  /*
  * 注意：移动对象必须是绝对定位   2 移动对象在另一个对象内部，则 对象位置是相对于其外部对象的位置 
  * id 移动对象的id
  * maxTop 对象移动的最大高度 
  */
  function move(id, maxTop){
	  var obj = document.getElementById(id);
	  var speed = 2;
	  //alert( maxTop+" ============"+obj.style.top );
	  (function(){
		  setTimeout(function(){
			  //speed *= 2;
			  var top = parseFloat(obj.style.top);
			  obj.style.top = (top-speed)+'px';
			 
			  if(top < maxTop+3){
				  obj.style.top = maxTop+'px';
			  }else{
				  setTimeout(arguments.callee,25); 
			  }
		  },25)
	  })();
  }

  //得到某个对象的绝对top
  function getAbsoluteTop(ob){
	  if(!ob){return null;}  
	  var mendingOb = ob;  
	  var mendingTop = mendingOb .offsetTop;  
	  while( mendingOb != null && mendingOb .offsetParent != null 
			  && mendingOb .offsetParent.tagName != "BODY" ){  
	      mendingTop += mendingOb .offsetParent.offsetTop;  
	      mendingOb = mendingOb .offsetParent;  
	  }  
	   
	  return mendingTop ;  
   }  
  //得到某个对象的绝对left
  function getAbsoluteLeft(ob){  
	  if(!ob){return null;}  
	      var mendingOb = ob;  
	      var mendingLeft = mendingOb .offsetLeft;  
	      while( mendingOb != null && mendingOb .offsetParent != null 
	    		  && mendingOb.offsetParent.tagName != "BODY" ){  
	        mendingLeft += mendingOb .offsetParent.offsetLeft;  
	        mendingOb = mendingOb .offsetParent;  
	      }  
	  return mendingLeft ;  
   }
  
  //得到对象的宽高 ，以及位置
  function getPosition( domEle ){
	  var position={};
	  position.x = parseFloat(domEle.offsetLeft);
	  position.y = parseFloat(domEle.offsetTop);
	  position.width = domEle.clientWidth;
	  position.height = domEle.clientHeight;
	  position.absoluteLeft = getAbsoluteLeft(domEle);
	  position.absoluteTop =  getAbsoluteTop(domEle);
	  return position;
  }
  
  //tip 每次回到初始位置 
  function initTip(imgs,currentIndex){
	    var img11 = document.getElementById('index11');
	    var pos = getPosition( img11 );
	    var tip2 = document.getElementById('tip2');
	    tip2.style.left =  pos.x+"px";
	    tip2.style.top = pos.y + pos.height+50+"px"  ;
	  	
	    tip2.style.width = pos.width-20+"px";
	    tip2.innerHTML = imgs[currentIndex].alt;

	    if(!+"\v1"){//如果是ie 
	    	tip2.style.filter = "alpha(opacity=67)"
	      }else{
	    	  tip2.style.cssText += "background: rgba(164, 173, 183, .65);"
	      }
	    
	    //alert( pos.y+pos.height-49 );
	    move('tip2', (pos.y+pos.height-49));
  }

  //添加事件处理函数
  //添加自动执行的函数，文档初始化的时候会自动执行
  var addEvent = (function(){
	 if(document.addEventListener){
			return function(el,type,fn){
				el.addEventListener(type,fn,false);
			}
	 }else{
		return function(el,type,fn){
			el.attachEvent('on'+type,function(){
				fn.call(el , window.event);
			});
		}
	 }
  })();
  
  //给分页功能添加 单击事件 
  var pageObj = document.getElementById('page');
  var pageObjs = findChildred( pageObj);
  if(pageObjs!=null){
	  for(var i=0;i<pageObjs.length;i++){
		  addEvent(pageObjs[i],'click', function(){
			  var witchImg = this.getAttribute('imgTarget');
			  
			  //当前图像的数组下标 改为小一个，以便滚动的时候点击的这个图片可以显示出来 
			  document.imgIndex = parseInt(witchImg)-2;
 
			  var img1 = document.getElementById('index11');
			  img1.src = imgsTemp[parseInt(witchImg)-1].src;
		  });	
	  }
  }
  
  //改变 页码的选中 
  //pageObj 被选中的  超链接 
  function changeSelectPage( pageObj  ){
	  var pages = findChildred(findParentNode(pageObj));
	  for(var i=0;i<pages.length ;i++ ){
		  pages[i].className = ""; 
		  pages[i].removeAttribute('class') ; 
		  
	  }
	  pageObj.className = 'hover';
  }
// alert( imgsTemp[0].src +"  "+imgsTemp[1].src +"  "+imgsTemp[2].src );
</script>

 

 

最近正在进行js进阶，写了这个样例程序，请大家给与指点，谢谢 。

 

 

分享到：
| js 图片轮换样例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics