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实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

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

Javascript 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
vue 子组件修改data或调用操作
Aug 07 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
You might like
在JavaScript中调用php程序
2009/03/09 PHP
php实现图片缩放功能类
2013/12/18 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
js资料prototype 属性
2007/03/13 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
简单的js表格操作
2016/09/24 Javascript
Move.js入门
2017/02/08 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python将unicode转为str的方法
2017/06/21 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python 控制终端输出文字的实例
2019/07/12 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
NumPy中的维度Axis详解
2019/11/26 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
中秋节礼品促销方案
2014/02/02 职场文书
个人自我剖析材料
2014/02/07 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
1000字打架检讨书
2014/11/03 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
Python读写yaml文件
2022/03/20 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库