Javascript 使用jquery更改无序列表中的图像集

我试图用jQuery更改无序列表中的一组图像，但就是弄不明白。这是一个背景幻灯片，因此当有人单击Set2或Set3时，图像集将发生变化，幻灯片将开始播放该图像集

最简单的解决方案是用另一个幻灯片链接到另一个页面，但我正在处理一个页面的html，所以这对我来说很有挑战性。我尝试了.html、.replace、.attr，但它不起作用或者我似乎不明白。如果有人能透露一些信息，我将不胜感激

这是我正在编写的代码

HTML:

}))

我的朋友：

---

我想你想做的事情是这样的：

JSFiddle：

---

希望这有帮助。

您到底想要什么？嗨，苏达桑，-当有人单击设置2时，图像1、图像2和图像3将被替换为图像4、图像5和图像6。-当有人单击“设置3”时，所有3个图像也将被替换。这些图像集是否针对每个图像集（即设置1、设置2和设置3）都是固定的，并且在页面加载时它们是否可用？您好，Bushan，因此当页面加载时，图像1、2和3将是图库的默认图像。只有当他们单击set1、2或3时，图像1、2和3才会被替换。我正在为幻灯片建立分类。嗨，娜奥塔，非常感谢你的解决方案。它起作用了！你能解释一下什么是1吗。功能（e）？2.e、 preventDefault（）？非常感谢@雷扎桑，谢谢。你可以在这里读到。在这种情况下，将阻止默认的单击操作

preventDefault（）

防止浏览器跳转到

href=“#”

。

    <ul id="slideshow" class="bislideshow">
    <li><img src="image1.jpg" alt="image01"/></li>
    <li><img src="image2.jpg" alt="image02"/></li>
    <li><img src="image3.jpg" alt="image03"/></li>
    </ul>

    <ul>
    <li class="set1"><a href="#">SET 1</a></li>
    <li class="set2"><a href="#">SET 2</a></li>
    <li class="set3"><a href="#">SET 3</a></li>
    </ul>

    $(document).ready(function(){
    $(".set1").click(function(){
    //change list images to image3, image4 and image5

    alert("HTML: " + $(".bislideshow").html()); /* Display list to check if image sets are loaded */
    });

    $(".set2").click(function(){
    //change list images to image5, image6 and image7

    alert("HTML: " + $(".bislideshow").html()); /* Display list to check if image sets are loaded */
    });

    $(".set3").click(function(){
    //change list images to image8, image9 and image10

    alert("HTML: " + $(".bislideshow").html()); /* Display list to check if image sets are loaded */
    });
    });

$(function() {
    $img1 = $( "#slideshow > li:nth-child(1) > img" );
    $img2 = $( "#slideshow > li:nth-child(2) > img" );
    $img3 = $( "#slideshow > li:nth-child(3) > img" );
    $(".set1").click(function(e){
        e.preventDefault() ;
        $img1.attr({'src':'image1.jpg','alt':'image01'});
        $img2.attr({'src':'image2.jpg','alt':'image02'});
        $img3.attr({'src':'image3.jpg','alt':'image03'});
    });
    $(".set2").click(function(e){
        e.preventDefault() ;
        $img1.attr({'src':'image4.jpg','alt':'image04'});
        $img2.attr({'src':'image5.jpg','alt':'image05'});
        $img3.attr({'src':'image6.jpg','alt':'image06'});
    });
    $(".set3").click(function(e){
        e.preventDefault() ;
        $img1.attr({'src':'image7.jpg','alt':'image07'});
        $img2.attr({'src':'image8.jpg','alt':'image08'});
        $img3.attr({'src':'image9.jpg','alt':'image09'});
    });
});