Question

我正忙于制作引导单页布局，我想添加四个圆圈图像，它们彼此之间均等间隔，但有点儿扭曲！我想在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>*", "");
}

有人能指出我正确的方向吗？

使用for循环进行图像拼接

0 个答案: