常常发现网上有图在不断转啊转，你逛购物网或者刷网页都能碰到这样的情况？JavaScript能用它那个牛逼的DOM API和计时器，帮我们轻松实现这效果这个小贴士准备告诉你怎么用JS让图片轮番上阵，真的很容易，只需要控制图片列表、数数器、弄点图片放到页面，再定个你喜欢的时间就行了！
准备图片列表
要让图片轮流播放，得先弄明白要放什么图。咱们用js的数组存这些图挺好用的，每元素是图＋网址+说明，方便维护也能加新图。举个例子，建个叫’theimages’的数组，加入几幅图：
javascript const images =[ url为'图像1.jpg'的图，alt上写着它是'图像1'。 这就像是说，这个图片链接名叫‘image2.jpg’，描述是“图片2”。 海报上的图片是第三张，名叫“图片3”。 ];
定义计数器
let images = [
{ url: './img/1.jpg', alt: 'pic1' },
{ url: './img/2.jpg', alt: 'pic2' },
{ url: './img/3.jpg', alt: 'pic3' },
{ url: './img/4.jpg', alt: 'pic4' },
{ url: './img/5.jpg', alt: 'pic5' }
];
下面，给大家说说我们要用的计数器变量 currentIdx，它负责告诉我们当前正在展示哪张图。我们用从 0 开始计算的数组来定位图片顺序，因此初始化的初始 idx为0。想要切换显示图片的话，只要让计时器动起来即可，举个例子来说就是用 JavaScript 这样操作：
let currentIdx =0;
动态添加图片到页面
let currentIdx = 0;
简单来说，我们能用JavaScript的DOM接口创建一个img元素，然后把它放到网页上去展示。但是别忘了，你还需要有个地方放这个图片！所以我们就在HTML代码中添加了一个id为imgWrapper的div作为容器：
“`html
let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);
来！咱们先搞张图片放进javascript代码里，然后把这张图封装到叫做imgWrapper的小方块儿里头。
创建个<img>元素，简单来说就是在代码里加上这句话:<img src=”图片地址”>
把图片的网址传给img元素，就哦了。
给图加个说明，就是这么轻松！只要把现在这张图的说明写上去，就完成。
给我找到那个叫’imgWrapper’的div，我要改它。
给imgWrapper加个imageElement的东西就行！
设置定时器切换图片
想让图片定时更换？只需要一个计时器，然后有规律地展示下一张图片就好！这个小技巧用JavaScript就能轻松做到~方法就是利用setInterval函数完成计时工作。比如说，把间隔时间设成每三秒换一次图片：
let intervalId = setInterval(function() {
currentIdx++;
if (currentIdx >= images.length) {
currentIdx = 0;
}
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
}, 3000);
setInterval(()=>{
直接让idx加1，计算后再用到images的总长里头。
把当前图像的网址直接设为元素 img 的src属性。
在按钮旁添上图片当前的标题，就像这么做：imgElement.alt = images[currendIdx].alt。
}, 3000);
看完这段JavaScript代码，你就会搞懂最基本的图片轮播效果！当你的网页加载好后，第一张图会立刻出现；过个差不多3秒钟，它会自动切换到下一张
window.onunload = function() {
clearInterval(intervalId);
};
下面这个教程能教你简单快速地让图片像轮播一样动起来。这些都是些基础知识，当然你想加点特别效果，添加几个按钮啊之类的，那就随心所欲地弄！
快来学习如何用JavaScript制作动态图！学会后在网页设计这方面你会有更深的理解呢～别忘了积极提问和跟大家交流你的前端开发经验哟～
let images = [
{ url: './img/1.jpg', alt: 'pic1' },
{ url: './img/2.jpg', alt: 'pic2' },
{ url: './img/3.jpg', alt: 'pic3' },
{ url: './img/4.jpg', alt: 'pic4' },
{ url: './img/5.jpg', alt: 'pic5' }
];
let currentIdx = 0;
let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);
let intervalId = setInterval(function() {
currentIdx++;
if (currentIdx >= images.length) {
currentIdx = 0;
}
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
}, 3000);
window.onunload = function() {
clearInterval(intervalId);
};
。
评论0