编程 Javascript

jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

Posted in Javascript onSeptember 04, 2016

本文实例讲述了jQuery实现最简单的切换图效果。分享给大家供大家参考，具体如下：

<!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="200" id="banner">
</div>
<script src="jquery-1.7.2.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>

运行效果图如下：

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

- Author -

onestopweb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript KeyDown、KeyPress和KeyUp事件的区别与联系

Dec 03 Javascript

最常用的12种设计模式小结

Aug 09 Javascript

JavaScript的漂亮的代码片段

Jun 05 Javascript

jQuery网页选项卡插件rTabs用法实例分析

Aug 26 Javascript

jquery制作属于自己的select自定义样式

Nov 23 Javascript

JS中mouseover和mouseout多次触发问题如何解决

Jun 06 Javascript

jQuery EasyUI tree增加搜索功能的实现方法

Apr 27 jQuery

ES6中的Promise代码详解

Oct 09 Javascript

Vue 中使用 CSS Modules优雅方法

Apr 09 Javascript

node基于puppeteer模拟登录抓取页面的实现

May 09 Javascript

使用Phantomjs和Node完成网页的截屏快照的方法

Jul 16 Javascript

js实现淘宝浏览商品放大镜功能

Oct 28 Javascript

jQuery实现的自定义弹出层效果实例详解

Sep 04 #Javascript

JS简单实现仿百度控制台输出信息效果

Sep 04 #Javascript

把多个JavaScript函数绑定到onload事件处理函数上的方法

Sep 04 #Javascript

JS简单测试循环运行时间的方法

Sep 04 #Javascript

jQuery使用$获取对象后检查该对象是否存在的实现方法

Sep 04 #Javascript

利用原生js和jQuery实现单选框的勾选和取消操作的方法

Sep 04 #Javascript

关于两个jQuery(js)特效冲突的bug的解决办法

Sep 04 #Javascript