87,987
社区成员
发帖
与我相关
我的任务
分享绿色部分的代码是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
];
//我就只给你写思路了,因为你只发了数组部分
//请求的部分
$.ajax({
url: "请求网页的地址",
data: {请求参数},
type: "POST",
dataType: "json",
success: function(data) {
//请求成功做的操作
//这里需要写你对图片的处理,然后push到config数组里
}
});
//遍历数组
config.map( ( value , index ) =>{
//value是当前项的值,index是当前项的下标
console.log( value , '--' , index)
}
布局的话可以使用绝对定位,将要展示的放在前面,其他的都放在一起就好,当点击切换时,将需要展示的left为0,下一张的left为图片宽度,上一张left为-图片宽度就好了
你的图片数组不就是config么,那么图片数量就是config.length,所以你只要遍历config就能拿到各个图片的属性参数。如果你想要从其他地方拿你的图片,你就写个请求,然后把图片属性push到config,再遍历config就行