jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
时间：2021-05-07 10:47:10|栏目：jquery|点击： 次
本文实例讲述了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切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
上一篇：jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
栏 目：jquery
本文标题：jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
本文地址：http://www.codeinn.net/misctech/116210.html
