JQ 最少代码实现多图切换
这个是偶实现的方法
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>最简单的多图切换</title>
<link rel="stylesheet" href="base.css" />
<style>
.banner{ width: 200px; height: 120px; margin: 80px auto 0 auto;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
</head>
<body>
<div class="banner">
<img src="img/aaa.png" id="slide" width="200" height="120">
</div>
<script>
$(function() {
simpleSlide();
});
function simpleSlide(){
var index = 0;
var arr = ['aaa.png', 'bbb.png', 'ccc.png'];
setInterval(function(){
index == (arr.length - 1) ? index = 0 : index ++;
$("#slide")[0].src = 'img/' + arr[index];
}, 4000);
}
</script>
</body>
</html>结果群友（大树）实现了更简单的方法
function simpleSlide(){
var index = 0;
var arr = ['aaa.png', 'bbb.png', 'ccc.png'];
setInterval(function(){
index++;
$("#slide")[0].src = 'img/' + arr[index%arr.length];
}, 4000);
} 效果图：
相关推荐
lupeng 2020-11-14
sjcheck 2020-11-10
sjcheck 2020-11-03
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
爱读书的旅行者 2020-07-07
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28
tianqi 2020-06-21
dadaooxx 2020-06-16