0

我想在幻灯片放映期间更改轮播下方的三个元素。指示与元素对应的特定幻灯片。

我已经完成了我的研究，但每次我尝试实现某人的代码时，它只会显示所有三个元素的开启或关闭。轮播使用 CSS 来激活 ( .active) 一张幻灯片，就像所有三张幻灯片同时显示一样，但您只能看到前面的一张。

基本上，我每个元素有两张图片，它们相同但颜色不同，所以当一张幻灯片出现时，它应该src用一点 js 切换到另一张图片；我已经这样做了，但它只适用于该onclick功能，而不是自动选择幻灯片时。

顺便说一句，我的目标是让幻灯片在用户单击上一个、下一个、指示器或在间隔期间触发每个元素。我已经让它在基本的 HTML 中工作，但引导内部工作对我来说似乎很难操作。

$(function() {  
// Cycles the carousel to a particular frame when clicked and changes the img

  $('#icon1').click(function() {
    $("#myCarousel").carousel(0);
    if ($("#myCarousel").carousel(0)) {
      document.getElementById('icon1').src='icon-hover.png' //this img is blue
    }

    if ($("#myCarousel").carousel(0)) {
      document.getElementById('icon3').src='icon3.png' //this img is black
    }

    if ($("#myCarousel").carousel(0)) {
      document.getElementById('icon2').src='icon2.png'
    }
  });

  //these are x3 but with different .carousel(numbers) and images in increment

  // Cycles the carousel to a particular frame when clicked and changes the text color
  $("#icon1").click(function() {
    $("#myCarousel").carousel(0); //the 0 is the slide.index/length
      if ($("#myCarousel").carousel(0)) {
        $('.element1').css('color', '#1462ba')
      }

      if ($("#myCarousel").carousel(0)) {
        $('.element2').css('color', 'black')
      }

      if ($("#myCarousel").carousel(0)) {
        $('.element3').css('color', 'black')
      }
    }); 

    //these are x3 but with different .carousel(numbers) and colors in increment
  });
4

0 回答 0