<!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图片轮换好看的JS图片轮换好看的JS图片轮换好看的JS图片轮换好看的JS图片轮换好看的JS图片轮换好看的JS图片轮换好看的JS图片轮换好看的JS图片轮换好看的JS图片轮换
JavaScript图片轮换源代码,yongJquery实现的不间断的图片轮换代码
js图片轮换
css js html 图片轮换 实用 不错css js html 图片轮换 实用 不错
Js 图片轮换显示 图片轮换显示 源代码 Js 图片轮换显示 图片轮换显示 源代码 ~~~~~~~~~~~~~~~~~~~~
完全js css 实现图片轮换特效!右侧带小缩略图!!
js实现图片轮换。。。。。。js实现图片轮换。。。。。。js实现图片轮换。。。。。。js实现图片轮换。。。。。。js实现图片轮换。。。。。。js实现图片轮换。。。。。。
js图片轮换特效
js实现图片轮换,简单方便!
JS 图片轮换 封装中处理时钟.zip
js css 图片轮换 简单的修改代码就可实现自己的图片轮换效果js css 图片轮换 简单的修改代码就可实现自己的图片轮换效果
图片特效浏览js 图片轮换 js代码+html css样式 欢迎下载
js图片轮换, 鼠标放在上面停留 功能很好
附带缩略图的JS图片轮换很好的代码图效果好
网页图片轮换代码网页图片轮换代码网页图片轮换代码网页图片轮换代码网页图片轮换代码网页图片轮换代码网页图片轮换代码
图片轮换js代码焦点图图片切换,图片js代码
js实现图片轮换效果!可以设定按一定时间进行轮换,也可以通过点击右下角编号进行选择相应的图片显示!
<script language=JavaScript src="js/5adpics.js">代码整理:懒人图库</a> *尊重他人劳动成果,转载请自觉注明出处! <p align="center"></p> <p align="center"></p> <p align="center"></p> <p> </p>