weixin_41244451 2021-12-06 22:36 采纳率: 76.9%
浏览 88
已结题

JS轮播图片的循环怎么写?

下面是是11张图片轮播部分代码,但是有个问题,我的轮播的图片可能不止11张,这个数量的多少取决于我的设定的数量,也就是说这个数量不是固定的,我想写一个图片循环来表示,但是这个循环要怎么写?
var w="700";
var l="114";
var p=0.1;
var z=1;
var config =
[
{
"width": w,
"left": 0l,
"opacity": p
1,
"zIndex": 1z,
},//0
{
"width": w,
"left": 1
l,
"opacity": p2,
"zIndex": 2
z,
},//1
{
"width": w,
"left": 2l,
"opacity": p
4,
"zIndex": 3z,
},//2
{
"width": w,
"left": 3
l,
"opacity": p6,
"zIndex": 4
z,
},//3
{
"width": w,
"left": 4l,
"opacity": p
8,
"zIndex": 5z,
},//4
{
"width": w,
"left": 5
l,
"opacity": p10,
"zIndex": 6
z,
},//5
{
"width": w,
"left": 6l,
"opacity": p
8,
"zIndex": 5z,
},//6
{
"width": w,
"left": 7
l,
"opacity": p6,
"zIndex": 4
z,
},//7
{
"width": w,
"left": 8l,
"opacity": p
4,
"zIndex": 3z,
},//8
{
"width": w,
"left": 9
l,
"opacity": p2,
"zIndex": 2
z,
},//9
{
"width": w,
"left": 10l,
"opacity": p
1,
"zIndex": 1*z,
}//10
];

  • 写回答

3条回答 默认 最新

  • 前端阿彬 前端领域新星创作者 2021-12-06 23:49
    关注

    不太懂你题目的意思

    1. 如果是问怎么设置不定数量的轮播图:
      例如:element的轮播图,直接v-for循环渲染就行了
    <el-carousel height="150px">
          <el-carousel-item v-for="item in imgArr" :key="item">
            <img src="item">
          </el-carousel-item>
        </el-carousel>
    
    1. 如果你是想自己做轮播图,设置个图片数组,每个对象有自己的样式,例如你上面的数据格式:
      比如你想设n张图的轮播图
    let arr = Array(n).fill('')
    imgArr = arr.map((item,index) => {
      item.width = "700"
      item.left = index*114
      item.opacity = (index+1)*0.1
      item.zindex = index+1
    })
    

    如有帮助,望采纳 ^.^ 谢谢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 12月20日
  • 已采纳回答 12月12日
  • 创建了问题 12月6日

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集?
  • ¥20 关于#硬件工程#的问题,请各位专家解答!
  • ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错,维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯:Person is not mapped,如何解決?
  • ¥15 c++头文件不能识别CDialog