?
<!doctype html>
<title> </title>
<meta charset="utf-8"/>
<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;background-color:white;width:400px;height:50px; color: rgb(255, 255, 255); background: none repeat scroll 0% 0% rgba(164, 173, 183, 0.65);size: 30px; ?padding-left: 20px; line-height: 45px;">
? </dd>
</dl>
?
?
<br><br><br><br><br>?
<script type="text/javascript">
// 图片区域只显示一张图片，其余图片都是溢出隐藏来控制的
/**
*作用不断乱换显示图片
* changeImg 图片组总显示的那个图片
* imgs 图片组
*/
function changePicture( changeImg , imgs ){
var imgIndex =0 ;
(function(){
setTimeout(function(){
if((imgIndex+1) ==imgs.length ){
imgIndex= 0 ;
}else{
imgIndex++;
}
changeImg.src = imgs[imgIndex].src;
initTip(imgs,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;
}
//对象的移动
function move(id, maxTop){
var obj = document.getElementById(id);
var speed = 1;
//alert( maxTop+" ============"+obj.style.top );
(function(){
setTimeout(function(){
speed *= 1.5;
var top = parseFloat(obj.style.top);
obj.style.top = (top-speed)+'px';
if(top <= maxTop){
obj.style.top = maxTop+'px';
}else{
setTimeout(arguments.callee,20);
}
},20)
})();
}
//得到某个对象的绝对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+"px";
tip2.innerHTML = imgs[currentIndex].getAttrib