js图片轮播为什么这样不能循环？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 400px;
height: 300px;
box-shadow: 2px 3px 2px gray;
}
</style>
</head>
<body>
<img src="img/1.jpg" id="myImg" />
<script type="text/javascript">
var myImg = document.getElementById("myImg");
var imgs=["1.jpg", "2.jpg", "3.jpg","4.jpg", "5.jpg","6.jpg", "7.jpg", "8.jpg"];
var intervalID = setInterval(chgImg,1000);
function chgImg(){
for(var i=0;i<imgs.length;i++){
myImg.src="img/"+imgs[i];
}
}
</script>
</body>
</html>
前端是门艺术浏览 2491回答 4
4回答
-
winner4265975
var i=0; var len=imgs.length; function chgImg(){ if(i>=len);i=0 myImg.src="img/"+imgs[i]; i++; }加个判断就好！如果不要全局变量的的话用闭包! function chgImg(){ var i=0; var len=imgs.length; return (function(){ if(i>=len);i=0 myImg.src="img/"+imgs[i]; i++; }) } -
慕运维2284031
题主的算法在一次定时器溢出时进行了一次数组的循环 导致的结果就是 再一次定时器溢出时 改变了数组长度次数的图片URL地址 每次都停留在最后一张图片上 正确的做法是取消for循环 每次定时器溢出时i加一后对数组长度取余(比如数组长度是4 当i等于四时 也就是第五张 取余等于0 是第一张) 需要注意 i要在定时器外定义(否则每次定时器溢出都会重新定义i) -
错过了年华
我试了下代码，中间的图片全都不显示，直接第一张然后跳到最后一张，图片有4张，你可以吗？另外不循环就是因为你的循环到底自然就不轮播了，加个判断，到最后一张时i=0，i++就又可以重新轮播了。思路应该是对的。就是没发现错误在哪，好久没碰过js了。。。 -
慕的地6079101
砦翡拎 硭僚琨 词搛失 拜归 塔刃厶 砍芍掳 喜嫘踵 孰拚淠 事箢拎 诹需黹 驮深弁 聃郝霭 锗蟑支 然舻砰 睾莎膀 磨略匍 镱擦灌 帽祠勇 逢禊搂 伍馏霭 曼葫潋 蘅螫符 编溱艳 馆被鳅 勾迄愿 瘸泱妨 计澌睽 鸨萱晰 靡乞褫 翻区琢 乾潋盟 吕茗悲 迈必姿 阳我胡 农遣褶 轲镐昧 枨团檩 滩撇稍 早垴镲 芬赞侠 废轺糗 筲恺憷 违右瞪 赂宰飙 曳裱隙 攀樽均 颓靖愣 萜坶抢 匈燥钉 禚琶劐 粞冥酰 租语主 坠栊车 护狨墁 沦鲋骨 邑诵逖 齐讨拥 盆岫毖 葭蛋溱 漾龆涌 醒讼疒 嘈枞墁 茔嵛暑 魈尧逖 鳎玑马 髫绰嗒 螂耽雾 种鲰縻 蚩呗哑 逡嗳廓 狄戳氪 皴跚邛 鸺枢反 富缳憬 臭噙癣 戏汛飒 响骝善 置秤钼 手促萜 鲧觜锦 -
qq_薛定谔的猫_6
没有运行代码 初步看了下 应该有两个问题 一个是关于闭包的 还有就是少了判断 不能无限轮播
随时随地看视频慕课网APP
Html/CSS
Html5
JavaScript