<!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进阶，写了这个样例程序，请大家给与指点，谢谢 。
相关推荐
在提供的压缩包文件中，"带轮换样式的Tab页签导航.rp"可能是包含该示例的项目文件，而"tab2"可能是另一个Tab页签样例或者与其相关的文件。通过查看这些文件，可以进一步了解具体的实现细节和代码结构。 总的来说，...
scratch少儿编程逻辑思维游戏源码-拽猫跳跃.zip
scratch少儿编程逻辑思维游戏源码-足球冠军.zip
机器人开发教程&案例&相关项目资源，奖励仅
实训商业源码-【原创】Scode源码站原创个人单页-毕业设计.zip
实训商业源码-【超人】商家联盟V3.3.0原版免授权-毕业设计.zip
内容概要：本文详细介绍了基于STM32的步进电机S型曲线和SpTA加减速控制算法。S型曲线算法通过设定启动频率、加速时间、最高速度和加加速频率等参数，实现平滑的加减速控制，适用于高精度控制场合。SpTA算法则以其良好的自适应性和多路电机控制能力著称，尤其适合CPLD/FPGA环境。文中提供了详细的伪代码和实际代码示例，展示了两种算法的具体实现方法和技术细节。此外，文章还讨论了两种算法的实际测试效果和优化技巧，如利用定时器和DMA提高性能，确保电机运行更加稳定和平滑。 适合人群：从事嵌入式系统开发、步进电机控制及相关领域的工程师和技术爱好者。 使用场景及目标：①需要对步进电机进行高效、稳定的加减速控制；②希望深入了解S型曲线和SpTA算法的工作原理及其实现方法；③寻求优化现有控制系统性能的技术方案。 其他说明：文章不仅提供了理论解释，还包括了大量的代码片段和实际测试数据，帮助读者更好地理解和应用这些算法。
计算机二级考试试题&参考资料&心得攻略等资源，
scratch少儿编程逻辑思维游戏源码-钟声.zip
scratch少儿编程逻辑思维游戏源码-宇宙混沌.zip
内容概要：本文详细介绍了宽带消色差超构透镜的设计与仿真实现，重点探讨了几何相位和补偿相位的协同作用。通过硅纳米柱结构参数的优化，实现了3.7-4.5μm中红外波段的高效聚焦。文中提供了详细的FDTD建模、Matlab相位计算以及Python优化算法的代码片段，展示了如何通过相位叠加模型解决色散问题。实验结果显示，相比单一几何相位设计，色散补偿效果提升了近3倍，聚焦效率达到了68%。 适合人群：从事光学设计、超构材料研究、电磁仿真领域的科研人员和技术开发者。 使用场景及目标：适用于希望深入了解超构透镜设计原理的研究人员，特别是那些关注宽带消色差性能提升的人群。目标是掌握几何相位与补偿相位的联合应用，提高超构透镜在特定波段的聚焦效率。 其他说明：文章不仅提供了理论推导和公式解释，还分享了许多实际操作中的经验和技巧，如参数扫描、优化算法选择、仿真工具配置等。此外，还讨论了波长泛化能力和常见问题的解决方案。
【vue】Vue3+TS+Vite+pinia+elementPlus电商项目实战.zip
scratch少儿编程逻辑思维游戏源码-下落忍者.zip
内容概要：本文详细介绍了基于西门子1200 PLC的轴运动控制在海康威视路由器壳子装配机项目中的应用。主要内容涵盖硬件配置、轴控制程序、气缸报警块、PUT/GET块通讯等多个方面。硬件上，使用西门子1200 PLC为核心控制器，控制3个伺服和1个电缸，并与其他PLC通信。软件层面，通过编写轴控制块、气缸报警块和通讯程序实现了对设备的精确控制。文章不仅展示了具体的代码示例，还分享了许多实战经验和优化技巧，如参数动态加载、通讯超时保护、状态机模式报警处理等。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对西门子1200 PLC轴运动控制感兴趣的读者。 使用场景及目标：①学习如何使用西门子1200 PLC进行轴运动控制；②掌握轴控制块、气缸报警块和通讯程序的具体实现；③了解工业自动化项目中的常见问题及其解决方案。 其他说明：文章提供了丰富的实战经验和优化技巧，有助于提高读者在实际项目中的开发效率和解决问题的能力。此外，附带的代码示例和详细的注释使得学习更加直观和易懂。
scratch少儿编程逻辑思维游戏源码-纸片马里奥 激流勇进.zip
XK7130数控铣床工作台及床身设计.rar
内容概要：本文详细探讨了基于最优线性二次型（LQR）理论的多智能体系统最优控制问题，特别是针对存在外部干扰的情况。文章首先介绍了在无外部干扰条件下，通过性能指标函数优化获得最优分布式控制协议，并展示了具体的Python代码实现。接着，为了应对外部干扰，引入了DOBC（基于干扰观测器的控制）方法，通过估计并补偿干扰，确保系统的稳定性。此外，还提出了带有最小采样粒度的事件触发机制，进一步提高了控制效率，减少了计算资源的消耗。最终，通过仿真验证了所提出方法的有效性和优越性。 适合人群：对多智能体系统、最优控制理论以及相关应用感兴趣的科研人员和技术开发者。 使用场景及目标：适用于需要处理复杂环境下多智能体协作任务的研究项目，如机器人集群控制、自动化系统管理等。主要目标是在存在外部干扰的情况下，实现高效稳定的多智能体系统控制。 其他说明：文中提供了详细的代码示例，帮助读者更好地理解和实现所讨论的技术细节。同时，强调了在实际应用中需要注意的问题，如干扰估计的收敛速度、事件触发条件的设计等。
内容概要：本文详细介绍了利用MATLAB及其工具箱YALMIP和求解器CPLEX/Gurobi构建电-气-热综合能源系统的耦合优化调度模型。该模型采用39节点电力系统、比利时20节点天然气系统以及热网系统进行建模，通过直流潮流、线性化处理等手段将复杂的非线性问题转化为线性规划问题，从而提高求解效率。文中展示了具体的数学公式、代码片段及求解策略，如目标函数的设计、气网平衡方程的处理、热电联产(CHP)和电转气(P2G)设备的约束条件等。此外，还讨论了求解器的选择与性能比较，以及模块化的代码设计思想。 适合人群：从事能源系统优化研究的专业人士，尤其是对电力系统、天然气系统和热网系统有深入了解的研究人员和技术人员。 使用场景及目标：适用于希望深入理解电-气-热综合能源系统耦合机制的研究者和技术开发者。主要目标是掌握如何通过MATLAB实现高效的多能耦合优化调度，探索不同能源系统之间的相互作用及其对整体系统性能的影响。 其他说明：文章不仅提供了详细的理论推导和代码实现，还分享了许多实践经验，如参数调优、线性化处理技巧等。这对于实际工程项目中的应用具有重要的指导意义。
scratch少儿编程逻辑思维游戏源码-月影——城市素材.zip