修改src属性达到图片轮换效果

上回做项目的时候用到了一个效果：点击某张图片时切换图片，这回也用到了，但是上回的代码却找不到了，只能重新写。为了避免“每次都重写"情况的发生，特意在这里做个记录。

 

具体业务是这样子的：点击UL下的LI时，弹出DIV，且LI下面的img标签切换src属性，如：默认情况下是"images/pic.png"，点击之后变成"images/pic_1.png"，再次点击或者DIV关闭时src属性变成“images/pic.png”，也就是变成初始状态。

 

LI的基本结构：

<ul>
<li onclick="load(this);">
<a href="javascript:void(0);">
<img src="images/pic.png"/>
</a>
</li>
......
</ul>

 

 因为src中的图片时可以随便修改的，不适合将图片作为背景写在class中，所以才使用img标签以便灵活切换，正因如此通过修改src属性就能达到效果。（load方法包含两部分：DIV展示和图片切换，这里只记录图片切换）

具体代码如下：

/**
*修改图标样式
*@param flag 标记 1-obj为li对象  2-obj对象为空，需要根据特定标记查找
*/
function setIcon(obj,flag){
	var $img=null,src=null,array=null;
	switch(flag){
	case 1://点击左侧一级图标时
		$img = $(obj).children().children("img");//获取img对象
		src = $img.attr("src");//获取当前src值
		array = src.split("_");//判断是否有下划线
		//src中若没有下划线，那么array.length=1，否则至少得大于1
		if(array.length>1){//说明有下划线，也就是处于选中状态，那么需要恢复回去
			$(obj).attr("cur","0");//取消当前LI的选中属性
			//alert(array[0]+".png");
			$img.attr("src",array[0]+".png");
		}else{//说明没有下划线，那么处于非选中状态，需要添加选中状态
			setIcon("",2);//取消其他li的选中状态
			$(obj).attr("cur","1");
			array = src.split(".");
			//alert(array[0]+"_1.png");
			$img.attr("src",array[0]+"_1.png");
		}
		break;
	case 2:
		$("ul li[cur=1]").each(function(){
			$(this).attr("cur","0");//取消当前LI的选中属性
			$img=$(this).children().children("img");
			src = $img.attr("src");//获取当前src值
			array = src.split("_");
			//alert(array[0]+".png");
			$img.attr("src",array[0]+".png");
		});
		break;
	default:
		break;
	}
}

 说明：flag用来标记是否有明确的li，

flag=1，说明需要修改的就是传递过来的li下的image；

flag=2，说明需要根据cur属性去找相应的li并进行修改，其中cur=1表示当前li处于选中状态，cur=0表示非选中状态。