Question

我正在尝试使用jQuery更改无序列表中的一组图像，但却无法弄明白。这是一个背景幻灯片，所以当有人点击Set2或Set3时，图像集将会改变，幻灯片将开始播放这组图像。

最简单的解决方案是使用另一个幻灯片链接到另一个页面，但我正在处理单页html，所以这对我来说非常具有挑战性。我试过.html，.replace，.attr但它只是不工作或我似乎不理解。感谢是否有人可以解释一下。

这是我正在处理的代码。

HTML：

    <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>

的jQuery

    $(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 */
    });
    });

}）;

我的jsFiddle： http://jsfiddle.net/Nn49J/

Answer 1

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

JSFiddle：http://jsfiddle.net/naokiota/5DM2w/3/

$(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'});
    });
});

希望这有帮助。

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

1 个答案: