<!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页签样例或者与其相关的文件。通过查看这些文件，可以进一步了解具体的实现细节和代码结构。 总的来说，...
内容概要：本文详细介绍了如何使用C#开发一个SMT贴片机的轨迹导入程序，该程序能够解析CAD设计的DXF文件并将其中的轨迹转换为适用于SMT设备的G代码。主要内容涵盖DXF文件的读取与解析、LWPOLYLINE的提取、坐标转换、G代码生成以及保存。此外，文中还探讨了一些实际应用中的注意事项，如坐标系转换、插补算法的选择和错误处理方法。通过具体的代码示例展示了如何利用netDxf库简化DXF文件的操作，并提供了路径优化和Z轴控制的具体实现。 适合人群：从事SMT行业或相关领域的工程师和技术人员，尤其是有一定C#编程基础并对数控编程感兴趣的开发者。 使用场景及目标：①将CAD设计的DXF文件高效转化为SMT设备所需的G代码；②确保生成的G代码能够在实际设备上正确执行，提高生产效率和准确性；③解决坐标系转换、插补算法选择等问题，增强程序的鲁棒性和实用性。 其他说明：建议在真实设备运行前先用CAM软件进行仿真测试，同时注意处理好文件读取和数值转换中的异常情况。
内容概要：本文详细介绍了基于西门子S7-1200 PLC的物流仓储自动化系统，涵盖了硬件架构、通信处理、运动控制算法、触摸屏交互等多个方面的内容。硬件上，采用S7-1217C处理器、G120变频器、ET200S远程站和激光测距传感器构建了一个精密的空间坐标定位体系。通信部分利用Profinet和RS485进行数据传输，并通过SCL和STL编写了多种实用的功能块，如急停处理、温漂补偿、路径优化等。运动控制方面，通过速度梯形图与S型曲线结合的方式实现高精度定位。触摸屏界面则通过WinCC Advanced实现报警记录和货位状态显示等功能。 适合人群：从事物流仓储自动化系统设计、开发和维护的技术人员，尤其是熟悉西门子PLC编程的工程师。 使用场景及目标：适用于需要高精度、高可靠性的物流仓储自动化项目的开发和调试。主要目标是提高系统的响应速度、定位精度和稳定性，确保设备能够长时间稳定运行。 其他说明：文中提供了大量实际代码片段和技术细节，帮助读者更好地理解和应用相关技术。此外，还分享了一些现场调试的经验和技巧，如温漂补偿、通信优化等。
新5
内容概要：本文详细介绍了如何利用MATLAB的Fuzzy工具箱实现驾驶员制动意图的识别。文中首先解释了模糊控制的基本概念及其在处理不确定性和模糊性方面的优势。随后，通过具体的MATLAB代码示例展示了如何构建模糊推理系统（FIS），包括定义输入输出变量、隶属函数以及规则库。此外，还讨论了实际应用中的优化措施，如调整隶属函数参数和引入多输入变量以提高系统的鲁棒性和准确性。最后，通过对比实验验证了模糊控制相比传统方法在响应时间和识别精度上的优越性。 适合人群：从事自动驾驶或智能辅助驾驶系统研究的技术人员，尤其是对模糊控制算法感兴趣的开发者。 使用场景及目标：适用于需要精确识别驾驶员制动意图的应用场合，如高级驾驶辅助系统（ADAS）、自动驾驶车辆的安全控制模块等。主要目标是提高系统的智能化水平，增强行车安全性。 其他说明：文中提供的代码片段和实验数据有助于读者深入理解模糊控制的工作机制，并为实际项目开发提供参考。同时，强调了参数调整的重要性，指出模糊控制并非万能解决方案，需结合具体应用场景进行优化。
内容概要：本文详细介绍了三菱PLC QD75模块FB功能块在伺服电机控制中的应用。首先阐述了选择FB功能块的原因，即编程方式清晰明了，便于维护和修改。接着展示了关键代码及其分析，包括输入输出变量、中间变量、初始化、运动参数设置、当前位置监控、目标位置判断以及错误处理等方面的内容。文中还提供了多个实用技巧，如速度切换判断、状态监控、错误处理、调试方法等。此外，文章强调了这套程序的适用范围和借鉴意义，尤其适合初学者作为模板进行项目级开发。 适合人群：具备一定PLC编程基础，尤其是三菱PLC初学者和项目级开发者。 使用场景及目标：①帮助读者理解三菱PLC QD75模块FB功能块的工作原理；②提供一个成熟的伺服电机控制程序模板，供读者在实际项目中参考和改进；③提高程序的可维护性和可靠性。 其他说明：文章不仅提供了详细的代码示例和注释，还分享了许多实际应用中的经验和技巧，有助于读者更好地理解和应用这些知识。
少儿编程scratch项目源代码文件案例素材-恶魔的冒险 Level Devil.zip
少儿编程scratch项目源代码文件案例素材-鬼影斩.zip
Node-Webkit Javascript (NW.js)
内容概要：本文详细介绍了基于UDS（Unified Diagnostic Services）协议的Bootloader的设计与实现，涵盖其多协议支持（XCP、CCP、UDS）、AUTOSAR兼容性、多版本选择（ILLD和MCAL）、广泛硬件平台支持（如TC系列芯片）以及CAN FD的支持。文中不仅提供了上位机和下位机的代码示例，还展示了具体的测试用例，确保Bootloader的功能正确性和稳定性。此外，文章探讨了Bootloader在汽车电子和工业控制系统中的应用场景，强调了其重要性和灵活性。 适合人群：从事汽车电子、嵌入式系统开发的技术人员，尤其是那些需要深入了解Bootloader工作机制和实现细节的人群。 使用场景及目标：适用于需要开发或维护汽车电子控制单元（ECU）的团队，旨在提高系统的可靠性和性能。目标包括但不限于：实现高效的数据传输、确保诊断服务的准确性、优化刷写速度、增强系统的安全性等。 其他说明：文章提供了丰富的代码示例和技术细节，帮助读者更好地理解和应用基于UDS的Bootloader。同时，针对不同硬件平台和应用场景，给出了具体的配置建议和注意事项。
esp32串口接收tcp发送代码
少儿编程scratch项目源代码文件案例素材-蝗虫群怪 Boss 战.zip
少儿编程scratch项目源代码文件案例素材-放射性南瓜田.zip
少儿编程scratch项目源代码文件案例素材-格林奇 Boss 大战.zip
文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位，文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常，无任何异常情况，敬请您放心查阅与使用。文档仅供学习参考，请勿用作商业用途。 Rust 以内存安全、零成本抽象和并发高效的特性，重塑编程体验。无需垃圾回收，却能通过所有权与借用检查机制杜绝空指针、数据竞争等隐患。从底层系统开发到 Web 服务构建，从物联网设备到高性能区块链，它凭借出色的性能和可靠性，成为开发者的全能利器。拥抱 Rust，解锁高效、安全编程新境界！
内容概要：本文详细介绍了使用MATLAB进行QPSK调制信号通过AWGN信道的误符号率（SER）和误比特率（BER）性能分析的方法。主要内容包括参数设置、随机比特流生成、Gray编码映射、AWGN信道建模、噪声功率计算、解调过程以及误码率统计。文中还讨论了一些常见的实现陷阱和技术细节，如Gray编码的正确实现、噪声方差的计算方法、信噪比转换等。通过仿真与理论值对比，展示了QPSK调制在不同信噪比下的性能表现。 适合人群：通信工程专业学生、通信系统开发者、MATLAB爱好者。 使用场景及目标：适用于希望深入了解QPSK调制原理及其在AWGN信道下的性能分析的研究人员和工程师。通过动手实践，可以掌握QPSK调制的基本原理、MATLAB编程技巧以及通信系统的性能评估方法。 其他说明：文中提供了详细的MATLAB代码片段，帮助读者更好地理解和实现QPSK调制的性能分析。此外，还提到了一些优化建议，如增加仿真次数以提高低信噪比区域的精度。
内容概要：本文详细介绍了六轴EtherCAT总线伺服涂布收卷机程序的实现过程。该系统通过六个伺服电机、变频器和编码器的配合，实现了动态测量频率、转速计算、频率换算与速度同步以及通讯控制等功能。文中提供了具体的代码示例，如Python、C/C++和ST语言代码片段，用于解释如何进行频率测量、转速换算、变频器频率设置和EtherCAT通讯控制。此外，还讨论了实际应用中的常见问题及其解决方案，如通讯延迟处理、异常处理和参数配置等。 适合人群：从事工业自动化控制领域的工程师和技术人员，尤其是对EtherCAT总线技术和伺服控制系统有一定了解的人群。 使用场景及目标：适用于需要高精度同步控制的工业应用场景，如涂布工艺和收卷环节。目标是帮助读者理解和实现六轴EtherCAT总线伺服涂布收卷机系统的协同工作，提高生产效率和稳定性。 其他说明：文章不仅提供了详细的代码实现，还分享了许多实际调试经验和技巧，有助于读者更好地应对实际工程中的挑战。
内容概要：本文详细介绍了如何利用COMSOL软件中的水平集方法进行激光打孔的模拟。首先，构建了几何模型并设置了材料参数，包括温度依赖的导热系数、密度和比热容等。接着，定义了高斯分布的激光热源，并引入了水平集方程来追踪熔池界面的变化。文中强调了网格划分、时间步长设置以及多物理场耦合的重要性，特别是在处理等离子体屏蔽效应时。最后，讨论了后处理步骤，如导出切割线数据、验证网格独立性和与实验数据对比等。 适合人群：从事精密加工领域的研究人员和技术人员，尤其是那些熟悉COMSOL软件并对激光打孔感兴趣的用户。 使用场景及目标：适用于希望深入了解激光打孔过程中涉及的各种物理现象的研究人员，帮助他们优化工艺参数，提高加工精度。同时，也为教学提供了一个很好的案例，使学生能够掌握复杂的多物理场耦合仿真技术。 其他说明：文中提供了大量具体的MATLAB代码片段，便于读者理解和实践。此外，作者还分享了一些实用的小技巧，如如何避免数值震荡、选择合适的初始参数等。
APK包名类名查看工具