导航首页 » 技术教程 » jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
全站头部文字 我要出现在这里
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】 289 2024-02-19   

本文实例讲述了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="http://www.gimoo.net/t/1812/img/a1.jpg" width="200" height="200" id="banner">
</div>
<script src="http://www.gimoo.net/t/1812/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程序设计有所帮助。



!!!站长长期在线接!!!

网站、小程序:定制开发/二次开发/仿制开发等

各种疑难杂症解决/定制接口/定制采集等

站长微信:lxwl520520

站长QQ:1737366103