轮播图片的循环怎么写?

weixin_41244451 2021-12-06 22:33:42

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

...全文
194 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
//我就只给你写思路了,因为你只发了数组部分

//请求的部分

$.ajax({
    url: "请求网页的地址",
    data: {请求参数},
    type: "POST",
    dataType: "json",
    success: function(data) {
        //请求成功做的操作
        //这里需要写你对图片的处理,然后push到config数组里
    }
});

//遍历数组
config.map( ( value , index ) =>{
     //value是当前项的值,index是当前项的下标
    console.log( value , '--' , index)
}
不染清狂 2021-12-07
  • 打赏
  • 举报
回复

布局的话可以使用绝对定位,将要展示的放在前面,其他的都放在一起就好,当点击切换时,将需要展示的left为0,下一张的left为图片宽度,上一张left为-图片宽度就好了

  • 打赏
  • 举报
回复

你的图片数组不就是config么,那么图片数量就是config.length,所以你只要遍历config就能拿到各个图片的属性参数。如果你想要从其他地方拿你的图片,你就写个请求,然后把图片属性push到config,再遍历config就行

weixin_41244451 2021-12-07
  • 举报
回复
@这不是去幼儿园的校车 图片从别的地方来,代码帮忙写一下

87,987

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧