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

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

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

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

会工作的！