用jQuery改变无序列表中的图像集
我试图用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/
我想你想要做的是这样的：
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'});
});
});
希望这可以帮助。
链接地址: http://www.djcxy.com/p/71679.html