`

JQ 最简单的切换图兼容IE6

阅读更多
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>最简单的切换图</title>
<!--
兼容IE6+
兼容火狐
兼容谷歌
兼容欧朋
-->
</head>
<body>
<style>
*{ margin:0; padding:0;}
.banner{ width:200px; margin:40px auto 0 auto;}
</style>
<div class="banner">
<img src="img/a1.jpg" width="200" height="150" id="banner">
</div>
<script src="jquery-1.10.1.min.js"></script>
<script>
var imgIndex = 0;
var arr = ['a1.jpg', 'a2.jpg', 'a3.jpg'];
setInterval(imgChange, 4000);
function imgChange() {
imgIndex == (arr.length - 1) ? imgIndex = 0 : imgIndex += 1;
$("#banner").attr('src','img/' + arr[imgIndex]); 
}
</script>
</body>
</html>

 

效果图:

 
 
 

 

 

  • 大小: 29.7 KB
2
0
分享到:
评论

相关推荐

    轮播图 幻灯片 可以左右切换

    要实现兼容IE8的效果,开发者可能使用了jQuery的版本是针对IE8优化的,或者应用了一些特定的polyfill(兼容性补丁)来弥补IE8不支持的一些现代浏览器特性。例如,CSS3的transition和animation属性在IE8中不被支持,...

    jQuery滑动选项卡制作带左右按钮控制滑动选项卡切换代码.zip

    6. **优化与兼容性**:最后,确保代码在各种浏览器上都能正常工作,可能需要对旧版本的IE浏览器进行一些特殊处理。同时,可以考虑添加触摸事件支持,以便在移动设备上也能流畅使用。 通过以上步骤,我们成功地使用...

    JQ 全选和反选和取消

    7. **兼容性考虑**:虽然jQuery库对浏览器的兼容性很好,但仍然需要测试在不同浏览器(如IE8+、Chrome、Firefox、Safari等)上的表现,以确保功能正常运行。 总之,"JQ全选和反选和取消"是一个常见且实用的前端交互...

    Jquery图片查看器,jquery实现类似QQ空间相册查看效果

    为了实现类似QQ空间的平滑过渡效果,我们可以在切换图片时使用`.fadeOut()`和`.fadeIn()`方法。同样,导航箭头可以监听点击事件,动态更新当前显示的图片。 此外,考虑到兼容性,确保你的jQuery代码能在各种浏览器...

    适合移动触摸设备的全屏jquery图片轮播插件

    只需引入必要的JavaScript和CSS文件,然后通过简单的配置就能快速创建一个全屏图片轮播。开发者还可以通过插件的API扩展功能,实现更复杂的需求。 总结来说,Flickerplate-2.1.1是一款强大且易用的全屏jQuery图片...

    使用jQuery制作基础的Web图片轮播效果

    5. **CSS样式**:为了实现透明背景,可以使用`rgba()`函数,但为了兼容旧版IE浏览器,还需要添加`filter`属性。HTML结构需要清晰,便于jQuery选择和操作元素。 下面是一个简单的HTML和CSS示例: ```html ...

    jquery.pdf

    1. **跨浏览器兼容性**:jQuery设计之初就考虑到了不同浏览器间的兼容性问题,因此它能够确保代码在主流浏览器(如Chrome、Firefox、IE等)中正常运行。 2. **易学易用**:jQuery的语法设计简洁直观,使得即使是初学...

    240多个jQuery插件.doc

    其轻量级的特点(压缩后仅21KB)以及对多种浏览器的良好兼容性(包括IE6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+),使其成为开发者们构建动态网页的理想选择。 #### 二、jQuery插件的重要性 jQuery不仅本身...

    jquery css 展开 收起 效果 仿京东

    总结起来,这个项目展示了如何利用简单的CSS和jQuery实现一个高效、兼容多种浏览器的展开收起功能,这对于提高网页的用户体验和优化页面加载速度具有重要意义。同时,这种简洁的设计方法也体现了现代Web开发中追求...

    jQueryMobile-HTML5模板

    1. **基础模板**:包含最简单的页面结构,适合学习jQuery Mobile的基本页面元素和布局方式。 2. **导航模板**:演示了如何使用jQuery Mobile的导航栏和下拉菜单,实现多级导航。 3. **表单模板**:展示了各种表单...

    快速解决jquery之get缓存问题的最简单方法介绍

    3. **切换到`$.post()`**:如果你的场景允许,可以改用`$.post()`,因为POST请求通常不被浏览器缓存。例如: ```javascript $.post('your-url', { data: yourData }, function(data) { // 处理返回的数据 }); `...

    jQuery实现的产品自动360度旋转展示特效源码分享

    在技术实现方面,我们需要为控制旋转的按钮绑定事件监听器,然后在这些事件发生时,通过改变图片容器的背景图或更改img标签的src属性来切换图片,实现连续旋转的视觉效果。如果是使用背景图的方式,可能还需要考虑...

    jQuery幻灯片插件Vmc Slider

    同时,jQuery的跨浏览器兼容性让Vmc Slider可以在大多数现代浏览器上无缝运行,包括Chrome、Firefox、Safari、Edge和IE9+。 在使用Vmc Slider时,开发人员可以自定义各种参数以满足特定需求。例如,可以设置幻灯片...

    jquery插件star-rating.js实现星级评分特效

    需要注意的是,由于star-rating.js插件不支持IE8以下的浏览器,因此在开发时应考虑这部分用户的兼容性问题,可能需要寻找其他替代方案或采用polyfill技术来弥补兼容性不足的问题。 总的来说,jQuery插件star-rating...

Global site tag (gtag.js) - Google Analytics