Changing set of images in unordered list with jquery

I'm trying to change a set of images in an unordered list with jQuery but just can't figure it out. It's a background slideshow so when someone clicks Set2 or Set3, the set of images will change and slideshow will start playing that set of images.

The easiest solution is to link to another page with another slideshow but I'm working on a single page html so it's quite challenging for me. I've tried .html, .replace, .attr but it's just not working or I don't seem to understand. Appreciate if someone could shed some light.

Here's the code that I'm working on.

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

});

My jsFiddle: http://jsfiddle.net/Nn49J/

---

I guess what you would like to do is something like this:

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

Hope this helps.

链接地址: http://www.djcxy.com/p/71680.html

上一篇: RecyclerView onClick

下一篇: 用jQuery改变无序列表中的图像集