Question

我想在这里问一些有关我的代码的问题。您可以找到一个演示站点

这是我在Wordpress中的“原始html”代码上使用的示例Javascript和CSS以及HTML。

JS

    function preview(e) {
        $("#mklbackground").css("background-color", e.value);
    }

    $("#mkl_palette1").kendoColorPalette({
        columns: 4,
        tileSize: {
            width: 30,
            height: 30
        },
        palette: [
            "#F7F7F4", "#F8F8F6", "#EAE4DB", "#F2EFE2",
            "#E2E9ED", "#E7ECEF", "#F6F6F3", "#F4F5F4",
            "#F7F7F4", "#E8E6DF", "#E7ECED", "#F1EFE6"
        ],
        change: preview
    });

    $("#mkl_palette2").kendoColorPalette({
        columns: 4,
        tileSize: {
            width: 30,
            height: 30
        },
        palette: [
            "#BAB8B3", "#A8A5A1", "#BDB8B3", "#AEAAA4",
            "#62676C", "#646C6F", "#67716F", "#C1BAB0",
            "#ABB7BB", "#BBB8BA", "#C0C4C6", "#B1B8BC"
        ],
        change: preview
    });

    $("#mkl_palette3").kendoColorPalette({
        columns: 4,
        tileSize: {
            width: 30,
            height: 30
        },
        palette: [
            "#E1C9B1", "#D5BFA8", "#E1C7B1", "#CDB7A2",
            "#E7C2AD", "#C8AF9E", "#DFBBA8", "#D2B3A5",
            "#E8BBA4", "#D3B19D", "#E2B7AB", "#CFA599"
        ],
        change: preview
    });


    $("#mkl_palette4").kendoColorPalette({
        columns: 4,
        tileSize: {
            width: 30,
            height: 30
        },
        palette: [
            "#B44047", "#C74842", "#B7433D", "#DA5C46",
            "#AC4053", "#B54A6E", "#A95B4E", "#AB5D58",
            "#B1616C", "#B44047", "#C74842", "#B7433D"
        ],
        change: preview
    });

    $("#mkl_palette5").kendoColorPalette({
        columns: 4,
        tileSize: {
            width: 30,
            height: 30
        },
        palette: [
            "#F5AC7A", "#F9B98A", "#F8964C", "#DA5C46",
            "#C97B47", "#EB882A", "#E17238", "#E5713F",
            "#F79844", "#FFAF41", "#FFA943", "#FEA04B"
        ],
        change: preview
    });

    $("#mkl_palette6").kendoColorPalette({
        columns: 4,
        tileSize: {
            width: 30,
            height: 30
        },
        palette: [
            "#FADE76", "#FBE184", "#E6DE8F", "#FDDB80",
            "#FBCC78", "#FFD47C", "#FFCA77", "#FED749",
            "#F0CD57", "#FFCF43", "#F7CE3F", "#E7C450"
        ],
        change: preview
    });
    $("#mkl_palette7").kendoColorPalette({
        columns: 4,
        tileSize: {
            width: 30,
            height: 30
        },
        palette: [
            "#0C8E76", "#288670", "#2F8173", "#3E756B",
            "#2C7C7F", "#1B7C8C", "#307788", "#226481",
            "#B2E2D2", "#A2D3C4", "#A8E2D6", "#9ED9CD"
        ],
        change: preview
    });
    $("#mkl_palette8").kendoColorPalette({
        columns: 4,
        tileSize: {
            width: 30,
            height: 30
        },
        palette: [
            "#0092C7", "#2E86BE", "#4A81B5", "#5E7AAD",
            "#577EB1", "#226481", "#4E5476", "#2F5877",
            "#1B7C8C", "#005C8E", "#265787", "#0071A7"
        ],
        change: preview
    });

    $("#picker").kendoColorPicker({
        value: "#ffffff",
        buttons: false,
        select: preview
    });
    
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mklslide");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.remove("active");
  }
  if(slides[slideIndex-1]){
    slides[slideIndex-1].style.display = "block"; 
  }
  if(dots[slideIndex-1]){
    dots[slideIndex-1].className += " active";
  }
}

/* Hide the images by default */
.mklslide {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

<link href="http://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div class="demo-section hidden-on-narrow k-content wide">
 <div class="slideshow-container">
       <div id="mklbackground">
        <div class="mklslide fade">
            <img class="image" src="http://danapaint.com/beta/wp-content/uploads/2018/10/tesinpirasi11.png">
        </div>
        </div>
      <div id="mklbackground">
<div class="mklslide fade">
            <img class="image" src="http://danapaint.com/beta/wp-content/uploads/2018/10/dana2.png">
        </div>
</div>
<div id="mklbackground">
<div class="mklslide fade">
            <img class="image" src="http://danapaint.com/beta/wp-content/uploads/2018/10/dana3.png">
        </div>
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
</div>

因此实际上第一张图片效果不错。他们使用右侧定义的颜色选择器更改背景。但是我无法在其他图像上使用它。我在这里想念什么吗？

我尝试在网络上对此进行挖掘，但是仍然找不到任何好的示例和用法。任何帮助，将不胜感激。

Answer 1

您正在使用相同的ID（mklbackground）3格。您不能对多个元素使用相同的ID。在preview方法中使用父容器类名代替Id来更改背景颜色。

function preview(e) {
    $(".slideshow-container").css("background-color", e.value);
}

它将起作用！

在HTML Wordpress上使用自定义背景CSS的图片幻灯片

1 个答案: