轮播图

男娘i 2021-11-17 06:32 518阅读 0赞

setInterval

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

给需要轮播的图片在js里声明一个变量 以数组的类型

在HTML里找到图片的位置

代码如下

HTML代码

  1. <div>
  2.     <img src="res/img/2019041118390470185819.jpg" alt="" id="img">
  3. </div>

js代码

  1. var aa = ['./res/img/2019041118390470185819.jpg',
  2.         './res/img/2019053012202489241236.jpg',
  3.         './res/img/2019041116401175094633.jpg',
  4.         './res/img/2019060618071061446671.jpg'];
  5.     var bb = document.getElementById('img');
  6.     var i = 0;
  7.     setInterval(function () {
  8.         //运行一次i+1
  9.         i++;
  10.         //如果i等于aa数组的长度时让i=0
  11.         if (i == aa.length) {
  12.             i = 0;
  13.         }
  14.         //让bb等于aa【i】
  15.         bb.src = aa[i];
  16.         //两秒钟轮播一次
  17.     }, 2000);

注意：这是不能手动控制的轮播图

转载于:https://www.cnblogs.com/gaojian910/p/11022108.html

发表评论

表情：
评论列表 （有 0 条评论，518人围观）

还没有评论，来说两句吧...

相关阅读

    相关 轮播图

    点击左右按钮，切换图片。图片的序号也随之变化。 逻辑思维：每次点击按钮时，只需要改变img的“src”属性就可以切换图片。将图片的"src"放在数组中，就可以知道每一张图的位

    落日映苍穹つ落日映苍穹つ/ 0 赞/ 391 阅读

    相关 轮播图

    setInterval setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 给需要轮播的图片在js里声明一个变量 以数组的类型 在H

    男娘i男娘i/ 0 赞/ 519 阅读

    相关 轮播图

    方案1 初始化插件： slides是一款基于jQuery无缝轮播图插件,支持图内元素动画，可以自定义动画类型 html代码 <div class="fullS

    末蓝、末蓝、/ 0 赞/ 731 阅读