<body onload="showImg()"> <div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/1.png" alt="图片1" width="500" height="300"/></li> <li><img src="images/2.png" alt="图片2" width="500" height="300"/></li> <li><img src="images/3.png" alt="图片3" width="500" height="300"/></li> <li><img src="images/4.png" alt="图片4" width="500" height="300"/></li> <li><img src="images/5.png" alt="图片5" width="500" height="300"/></li> </ul> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> </body>在此基础上使用jquery的siblings函数完成图片轮播

时间: 2023-07-19 21:16:06 浏览: 92

javascript代码在ie8里报错 document.getElementById(...) 为空或不是对象的解决方法 <font color=red>原创</font>

IE8中JavaScript报错document.getElementById(...)为空或不是对象的解决方法知识点： 1. 针对IE8浏览器的兼容性问题，主要是由于IE8对文档类型的声明（DTD）变得更为严格。这导致在不正确的文档类型声明下，JavaScript可能会出错，尤其是在使用document.getElementById()这类DOM操作函数时。 2. 解决方法之一是在HTML文档的开头明确指定文档类型声明（DTD）。使用以下代码行，可以声明文档类型为XHTML1.0 Transitional，并且在IE8中通过X-UA-Compatible meta标签指示浏览器以IE7模式来模拟渲染页面，从而达到兼容的效果。 ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "***"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ``` 3. 另外一个原因是JavaScript代码的执行顺序。如果在页面加载完全之前执行JavaScript代码，那么DOM元素可能还没有被正确加载，导致document.getElementById()无法找到对应的元素。在这种情况下，可以把脚本放在文档的底部，或者使用window.onload函数确保在文档加载完成后执行JavaScript代码。 4. 对于动态生成的DOM元素，确保在使用document.getElementById()之前，相关的DOM元素已经被添加到文档中。 5. IE8对于错误的HTML或CSS代码可能更为敏感。确保页面的结构没有错误，比如标签正确闭合，属性值有双引号包裹等，这能够避免浏览器对错误的容错，从而减少兼容性问题。 6. 如果页面中既有文档声明，可能因为div+css布局方式导致页面显示不一致。需要特别注意在不同浏览器中的显示差异，确保声明文档类型的一致性。 7. 在实际操作中，如果发现类似问题，首先检查页面是否有正确的文档类型声明，然后考虑浏览器兼容性问题，并对JavaScript代码执行顺序进行调整。 8. 当HTML文档类型声明不正确时，可能会导致所有后续的JavaScript执行出错，因此确保文档类型声明准确无误，能够帮助避免许多常见的JavaScript错误。 9. 在处理JavaScript报错问题时，除了检查文档类型声明，还需要确保引用外部JavaScript文件时页面已加载完成。有时候需要在JavaScript文件加载完成后刷新页面，以确保脚本正确执行。 10. 由于技术原因，如OCR扫描文档时的识别错误，可能会导致文中的代码或说明出现小部分识别不准确的情况。在这种情况下，开发者需要结合自己的知识，对识别出的内容进行适当的理解和调整，使其在实际应用中通顺有效。

好的，以下是代码实现： ```html <!DOCTYPE html> <html> <head> <title>使用jQuery实现图片轮播</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> /* 样式省略，与原代码一致 */ </style> <script> $(function() { // 获取图片列表 var $list = $(".screen ul li"); // 获取图片数量 var len = $list.length; // 获取每张图片的宽度 var width = $list.width(); // 设置ul的宽度 $(".screen ul").width(len * width); // 定时器，控制图片轮播 var timer = null; var index = 0; // 当前显示的图片下标 // 向左切换图片 $("#left").click(function() { index--; if (index < 0) { index = len - 1; } slide(); }); // 向右切换图片 $("#right").click(function() { index++; if (index >= len) { index = 0; } slide(); }); // 图片轮播函数 function slide() { var left = -index * width; $(".screen ul").stop().animate({left: left}, 500); $list.eq(index).addClass("active").siblings().removeClass("active"); } // 开始自动轮播 function start() { timer = setInterval(function() { index++; if (index >= len) { index = 0; } slide(); }, 2000); } // 停止自动轮播 function stop() { clearInterval(timer); } // 鼠标移入停止自动轮播，移出开始自动轮播 $(".all").hover(function() { stop(); }, function() { start(); }); // 开始自动轮播 start(); }); </script> </head> <body onload="showImg()"> <div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/1.png" alt="图片1" width="500" height="300"/></li> <li><img src="images/2.png" alt="图片2" width="500" height="300"/></li> <li><img src="images/3.png" alt="图片3" width="500" height="300"/></li> <li><img src="images/4.png" alt="图片4" width="500" height="300"/></li> <li><img src="images/5.png" alt="图片5" width="500" height="300"/></li> </ul> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> </body> </html> ``` 在上面的代码中，我们使用了 jQuery 的 `siblings` 函数来切换图片的样式。每次切换图片时，我们都会给当前图片的 `li` 元素添加 `active` 类，并将其兄弟元素的 `active` 类移除，从而实现图片样式的切换。另外，我们还使用了 jQuery 的 `animate` 函数来实现图片的滑动效果。最后，我们通过鼠标移入停止自动轮播，移出开始自动轮播的方式来控制图片轮播的开始和停止。

阅读全文

相关推荐

jQuery实现input[type=file]多图预览上传删除等功能

ie中 body onload 和 window onload 解决法案

DIV遮罩层 div div

HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单

JS值当前DIV的ID值的代码

基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

loading div层

onload.diff.img：onload.diff_img

DIV自动适应高度

鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

动态改变左侧Div宽度

javascript DIV跟随鼠标移动

html css div 跑马灯

页面加载div遮罩层

制作一个网页，里面有三个div，id分别为div1，div2，div3，均属于class .class1div1里有一个p，class属于class1，div2有两个p，属于class2，div3有一个p，属于class1 要求，alert div1中的p。尽可能详细，保证能运行

最新推荐

PHP语言基础知识详解及常见功能应用.docx

公司金融课程期末考试题目

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能

"互动学习：行动中的多样性与论文攻读经历"

L1正则化模型诊断指南：如何检查模型假设与识别异常值（诊断流程+案例研究）

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？