当前位置: 首页 > 图灵资讯 > 技术篇> JQ 最少代码实现多图切换

JQ 最少代码实现多图切换

来源:图灵教育
时间:2023-06-27 15:08:23

这是偶实现的方法

<!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><p class="banner"><img src="img/aaa.png" id="slide" width="200" height="120"></p><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);}

效果图:

JQ 最少代码实现多图切换_多图切换