jquery多张图片替换自身地址实现切换效果
浏览数：177 /
时间：2015年06月09日
<div class="slider_nav">
<ul>
<li><a href="#"><img src="images/1.jpg" src_2="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" src_2="images/4.jpg" /></li>
<li><a href="#"><img src="images/5.jpg" src_2="images/6.jpg" /></a></li>
<li><a href="#"><img src="images/7.jpg" src_2="images/8.jpg" /></a></li>
<li><a href="#"><img src="images/9.jpg" src_2="images/10.jpg" /></a></li>
</ul>
</div>
<ul>
<li><a href="#"><img src="images/1.jpg" src_2="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" src_2="images/4.jpg" /></li>
<li><a href="#"><img src="images/5.jpg" src_2="images/6.jpg" /></a></li>
<li><a href="#"><img src="images/7.jpg" src_2="images/8.jpg" /></a></li>
<li><a href="#"><img src="images/9.jpg" src_2="images/10.jpg" /></a></li>
</ul>
</div>
<script>
//图片导航切换
$(function(){
var picHref = [];
//alert($(this).find("img").attr("src"));
var src_2 = $(this).find("img").attr("src_2");//获取点击后新的图片地址
$(this).find("img").attr("src",src_2);//添加当前新地址图片
//给同级元素替换回原来的图片地址
$(this).siblings().each(function(){
var index = $(this).index();
//alert(index);
$(this).find("img").attr("src",picHref[index]);
});
return false;
});
})
$(".slider_nav ul li").each(function(){
picHref.push($(this).find("img").attr("src"));//存放图片原地址
});
//alert(picHref[0]);
$(".slider_nav ul li").click(function(){//alert($(this).find("img").attr("src"));
var src_2 = $(this).find("img").attr("src_2");//获取点击后新的图片地址
$(this).find("img").attr("src",src_2);//添加当前新地址图片
//给同级元素替换回原来的图片地址
$(this).siblings().each(function(){
var index = $(this).index();
//alert(index);
$(this).find("img").attr("src",picHref[index]);
});
return false;
});
})
</script>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
