我正忙于制作引导单页布局,我想添加四个圆圈图像,它们彼此之间均等间隔,但有点儿扭曲!我想在for循环中使用图像上的javascript拼接(添加和删除方法),以便如果有人单击其中一个带圆圈的图像,它将替换最后一个图像,这是否可能?忙着绕圈转,把它想成是转折!
示例图片
我知道会有很多人讨厌我问我,但我真的很感谢您的帮助。
谢谢。
编辑
我要添加与每个圆圈对齐的文本,但也希望文本也随着圆圈淡出!认为那太酷了!
编辑V.2
所以我被要求添加代码,但这实际上是一个问题,是否可以解决,所以什么都不做...
在引导程序中创建的三个圆圈...
<section>
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="rounded-circle img-fluid mx-auto d-block" src="../assets/partner1.jpg" />
<h6 class="text-center g-mt-50 font-weight-bold">Bradley Hunter</h6>
<p class="text-center g-mt-50">
Based in Chicago. I love playing tennis and loud music.
</p>
</div>
<div class="col-sm-3">
<img class="rounded-circle img-fluid mx-auto d-block" src="../assets/partner2.jpg" />
<h6 class="text-center g-mt-50 font-weight-bold">Marie Bennet</h6>
<p class="text-center g-mt-50">
Currently living in Colorado. Lover of art, languages and travelling.
</p>
</div>
<div class="col-sm-3">
<img class="rounded-circle img-fluid mx-auto d-block" src="../assets/partner3.jpg" />
<h6 class="text-center g-mt-50 font-weight-bold">Diana Wells</h6>
<p class="text-center g-mt-50">
Living in Athens, Greece. I love black and white classics, chillout music and green tea.
</p>
</div>
<div class="col-sm-3">
<img class="rounded-circle img-fluid mx-auto d-block" src="../assets/partner4.jpg" />
<h6 class="text-center g-mt-50 font-weight-bold">Christopher Pierce</h6>
<p class="text-center g-mt-50">
Star Wars fanatic. I have a presistent enthusiasm to create new things.
</p>
</div>
</div>
</div>
</section>
在stackoverflow Remove items from array with splice in for loop上看到了这一点
var searchInput, i;
searchInput = ["this", "is", "a", "test"];
i = searchInput.length;
while (i--) {
if (searchInput[i].length < 4) {
searchInput.splice(i, 1);
}
}
但是我想使用图像代替我添加的图像中所述的图像。
编辑V.3
因此,在经过数小时的谷歌搜索和阅读其他人的方法之后,我终于找到了我想要的...但是现在我似乎无法弄清楚如何刷新DIV标签而不是整个页面,以便单击可以连续进行for循环
到目前为止的代码
let image_arr = [{
id: 'part_1',
image_src: '../assets/partner1.jpg',
h6_tag: 'Bradley Hunter',
p_tag: 'Based in Chicago. I love playing tennis and loud music.',
},
{
id: 'part_2',
image_src: '../assets/partner2.jpg',
h6_tag: 'Marie Bennet',
p_tag: 'Currently living in Colorado. Lover of art, languages and travelling.',
},
{
id: 'part_3',
image_src: '../assets/partner3.jpg',
h6_tag: 'Diana Wells',
p_tag: 'Living in Athens, Greece. I love black and white classics, chillout music green tea.',
},
{
id: 'part_4',
image_src: '../assets/partner4.jpg',
h6_tag: 'Christopher Pierce',
p_tag: 'Star Wars fanatic. I have a persistent enthusiasm to create new things.',
},
];
$(document).ready(function () {
// create
createPartnerRow(image_arr);
})
$(document).ready(function () {
$("[id^=part_]").hover(function (image_arr) {
$(this).addClass('border')
},
function () {
});
});
$("[id^=part_]").ready(function () {
$("[id^=part_]").click(function () {
$(this).removeClass('border')
// set value
var current_partner = image_arr[0];
// remove first element from array
image_arr = image_arr.splice(1, 4);
// append current_partner to end of array
image_arr.push(current_partner);
// clear the row of all partners;
$('#part_1, #part_2, #part_3, #part_4').remove();
// recreate row
console.log(image_arr);
createPartnerRow(image_arr);
});
})
function createPartnerRow(image_arr) {
for (i = 0; i < image_arr.length; i++) {
$('#partner_row').append(
'<div class="col-md-3 col-sm-6 p-3" id="' + image_arr[i].id + '">' +
'<button class="border-0 bg-white">' +
'<img class="rounded-circle img-fluid mx-auto d-block" src="' + image_arr[i].image_src + '"' + '/>' +
'<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + image_arr[i].h6_tag + '</h6>' +
'<p class="text-center g-mt-50 pt-2">' + image_arr[i].p_tag + '</p>' +
'</button>' +
'</div>'
)
}
}
function refreshdiv() {
$("#partner_row").load(location.href + " #partner_row>*", "");
}
有人能指出我正确的方向吗?