Question

我正在创建一个网站来展示我的客户的摄影作品。我有几个不同的主要图像，以幻灯片形式旋转。我希望指向该特定类别的链接在显示相应图像时更改为其他颜色。我的功能完美适用于第一张图像，但它不适用于我的第二张图像。有人可以阅读我的代码，看看可能有什么问题吗？我没有在控制台中出现任何错误，我相信它应该可以工作，因为它与第一个完全相同。非常感谢你!!

<!-- Photo Slider -->
        <div id="maincarousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img class="d-block img-fluid natureMain" src="bppnature/Hope.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid buildingMain" src="bppbuildings/here comes the sun (around the way).jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid fashionMain" src="bppfashion/Eye Eternal.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid productMain" src="Main Images/Proper Prepardness.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid abstractMain" src="bppabstract/Interconnected.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid coverMain" src="bppcoverart/Black EGYptian BastARD (right).jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid graffittiMain" src="bppgraffitti/Gang'N'em.jpg">
            </div>
            <ol class="carousel-indicators">
                <li data-target="#maincarousel" data-slide-to="0" class="active"></li>
                <li data-target="#maincarousel" data-slide-to="1"></li>
                <li data-target="#maincarousel" data-slide-to="2"></li>
                <li data-target="#maincarousel" data-slide-to="3"></li>
                <li data-target="#maincarousel" data-slide-to="4"></li>
                <li data-target="#maincarousel" data-slide-to="5"></li>
                <li data-target="#maincarousel" data-slide-to="6"></li>
              </ol>
          </div>
        </div>

$(document).ready(function(){
                // $("#mainslider").slick({
                //   infinite: true,
                //   slidesToShow: 1,
                //   slidesToScroll: 1,
                //   centerMode: true,
                // //   autoplay: true,
                // //   autoplaySpeed: 2000,
                //   pauseOnHover: true
                // });
                highlightNatureMain();
                highlightBuildingMain();
                $('.slickcarousel').slick({
                  infinite: true,
                  slidesToShow: 4,
                  slidesToScroll: 1,
                  centerMode: true,
                //   autoplay: true,
                //   autoplaySpeed: 2000,
                  pauseOnHover: true
                });
                carouselDisplay();
                // animationNature();
                // animationBuilding();
                // animationFashion();
                // animationProducts();
                // animationAbstract();
                // animationCovers();
                // animationGraffiti();
                // animationProjects();
                // stopHover();
                // imageHover();
                setInterval(function(){ nameFlash();}, 3000);

            });

function highlightNatureMain() {
                if ($(".natureMain").parent("div").hasClass("active")) {
                    $('.nav-nature').css('color', 'purple');
                }
                else {
                    $(".nav-nature").css("color","white");
                }
            }
            function highlightBuildingMain() {
                if ($(".buildingMain").parent("div").hasClass("active")) {
                    console.log("br");
                    $('.nav-building').css('color', 'purple');
                }
            }

Answer 1

如果你想要做的就是更改幻灯片上的CSS，那么你就太复杂了 - 你根本就不需要javascript！

仅限CSS

您已经拥有与幻灯片相关联的类，因此您只需要为这些类创建规则，例如

.item .nav-nature{ color: purple;}    /* default colour for this element */
.item.active .nav-nature{ color: white;}    /* colour when this item is active */
.item .nav-building{ color: purple;}
.item.active .nav-nature{ color: white;}

Slick滑块的jQuery回调函数

但是如果你确实需要在jQuery中做一些事情，那么光滑的滑块有回调函数beforeChange和afterChange，所以你可以使用它们，例如

jQuery('#mainslider').on('beforeChange', function(event, slick, currentSlide, nextSlide){

    switch(nextSlide){
        case 1: /* next slide is the first slide */
           [... do something...]
           break;
        case 2: /* second slide */
           [...]
           break;
    }
}

使用回调设置链接颜色

如果你确实需要通过jQuery为链接设置CSS，一个方便的方法是使用数组作为颜色 - currentSlide和nextSlide是幻灯片位置，所以你可以使用它们作为数组的关键，例如

CSS - 设置链接的默认颜色

.item .nav-nature{ color: purple;} 
.item .nav-building{ color: purple;}

jQuery - 设置活动幻灯片的颜色

/* an array of the link colours, corresponding to the slides */
var linkcolours = ["white", "white", "blue", "red", etc...];

jQuery('#mainslider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    /* set the active slide colour to the position of the corresponding slide 
       e.g. get the 1st element from the array (index=0) for slide 1 etc */
    $(".item.active a").css("color", colours[nextSlide-1]);
});

如何更新Slick轮播中当前幻灯片的CSS？

1 个答案: