JS控制浏览新闻图片。资源-CSDN文库

共4个文件

js：2个

html：2个

1星需积分: 5 25 浏览量 2012-01-13 15:19:02 上传评论收藏 7KB RAR 举报

在JavaScript（JS）中控制浏览新闻图片是一种常见的网页交互需求，尤其在现代Web开发中，随着Flash逐渐被淘汰，JS已经成为实现动态图像展示的主要工具。本文将深入探讨如何使用JavaScript实现图片浏览功能，解决图片随浏览器窗口大小变化的问题，以及解决在Internet Explorer 8（IE8）中点击链接无法跳转的问题。我们要明白JavaScript如何操作DOM（Document Object Model），这是HTML和XML文档的结构树，允许我们通过编程方式与页面元素交互。在JS中，我们可以使用`document.getElementById`或`document.querySelector`等方法选取图片元素，然后通过修改样式属性如`width`和`height`来控制图片的尺寸。对于浏览器窗口大小变化时图片自适应的问题，可以利用CSS的响应式设计配合JS来实现。一种常见的方式是设置图片的宽度为`100%`，高度自动计算保持原图比例。当窗口大小改变时，JS监听`window.resize`事件，重新计算并设置图片的尺寸，确保图片始终填充其容器，而不会失真。在实现图片切换功能时，通常会用到数组存储图片源，并结合计数器或索引来切换显示。例如，可以创建一个`showNextImage`函数，每次调用就更新当前显示的图片索引，然后更新图片元素的`src`属性。同时，可以添加键盘事件监听或者自定义按钮来触发这个函数，实现手动切换。关于IE8点击链接无法跳转的问题，这是因为IE8对某些JS特性支持不足。可以尝试以下解决方案： 1. 确保HTML标签正确关闭，比如`<a>`标签必须有对应的`</a>`，因为IE8可能对不完整标签处理不正确。 2. 检查链接的`href`属性是否正确，确保没有语法错误。 3. 使用`window.location.href = '链接地址';`替代`a标签`的点击事件，这样可以确保在所有浏览器中都能正常跳转。 4. 如果链接是通过JS动态添加的，确保在添加后触发`click`事件，例如：`document.getElementById('linkId').click();` 5. 对于IE8，可能需要使用`attachEvent`而非`addEventListener`来绑定事件处理函数，因为IE8不支持`addEventListener`。在提供的压缩包文件中，`SlideTrans.html`很可能是包含图片浏览功能的HTML页面，`SlideTrans.js`则是对应的JavaScript脚本，可能包含了图片切换和尺寸调整的代码。`SlideTrans`可能是样式表文件或图片资源。通过查看这些文件，我们可以更具体地了解实现细节和代码结构。使用JavaScript控制新闻图片浏览涉及DOM操作、事件监听、响应式设计等多个方面，需要对JavaScript有扎实的基础。在实际项目中，还需要考虑兼容性问题，尤其是对老旧浏览器如IE8的支持，这往往需要更多的适配和解决策略。

资源推荐

资源详情

资源评论

收起资源包目录

SlideTrans.rar （4个子文件）

SlideTrans.js 4KB

SlideTrans.html 5KB

SlideTrans

SlideTrans.js 4KB

SlideTrans.html 5KB

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 图片滑动切换效果</title> <script src="SlideTrans.js"></script> </head> <body> <style type="text/css"> .container, .container img{width:280px; height:200px;} .container img{border:0;vertical-align:top;} </style> <div class="container" id="idContainer"> <table id="idSlider" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html"><img src="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_rt_3.jpg"/></a></td> <td><a href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html"><img src="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_rt_4.jpg"/></a></td> <td><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html"><img src="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_rt_5.jpg"/></a></td> </tr> </table> </div> <script> new SlideTrans("idContainer", "idSlider", 3, { Vertical: false }).Run(); </script> <br /> <style type="text/css"> .container ul, .container li{list-style:none;margin:0;padding:0;} .num{ position:absolute; right:5px; bottom:5px; font:12px/1.5 tahoma, arial; height:18px;} .num li{ float: left; color: #d94b01; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 11px; cursor: pointer; margin-left: 3px; border: 1px solid #f47500; background-color: #fcf2cf; } .num li.on{ line-height: 18px; width: 18px; height: 18px; font-size: 14px; margin-top:-2px; background-color: #ff9415; font-weight: bold; color:#FFF; } </style> 仿淘宝/alibaba图片切换： <div class="container" id="idContainer2"> <ul id="idSlider2"> <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html"> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg" alt="图片上传预览" /> </a></li> <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/08/10/FixedMenu.html"> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg" alt="多级联动菜单" /> </a></li> <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/07/07/FixedTips.html"> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg" alt="浮动定位提示" /> </a></li> <li><a href="http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html"> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg" alt="数据延迟加载" /> </a></li> <li><a href="http://www.cnblogs.com/cloudgamer/archive/2009/12/01/Quick_Upload.html"> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song5.jpg" alt="简便文件上传" /> </a></li> </ul> <ul class="num" id="idNum"> </ul> </div> <br /> <div> <input id="idAuto" type="button" value="停止" /> <input id="idPre" type="button" value="<<" /> <input id="idNext" type="button" value=">>" /> <select id="idTween"> <option value="0">默认缓动</option> <option value="1">方式1</option> <option value="2">方式2</option> </select> </div> <script> var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length, st = new SlideTrans("idContainer2", "idSlider2", n, { onStart: function(){//设置按钮样式 forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; }) } }); for(var i = 1; i <= n; AddNum(i++)){}; function AddNum(i){ var num = $$("idNum").appendChild(document.createElement("li")); num.innerHTML = i--; num.onmouseover = function(){ timer = setTimeout(function(){ num.className = "on"; st.Auto = false; st.Run(i); }, 200); } num.onmouseout = function(){ clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); } nums[i] = num; } st.Run(); $$("idAuto").onclick = function(){ if(st.Auto){ st.Auto = false; st.Stop(); this.value = "自动"; }else{ st.Auto = true; st.Run(); this.value = "停止"; } } $$("idNext").onclick = function(){ st.Next(); } $$("idPre").onclick = function(){ st.Previous(); } $$("idTween").onchange = function(){ switch (parseInt(this.value)){ case 2 : st.Tween = Tween.Bounce.easeOut; break; case 1 : st.Tween = Tween.Back.easeOut; break; default : st.Tween = Tween.Quart.easeOut; } } </script> <br /> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </body> </html>

评论收藏

内容反馈