KISSY对大小图片的切换功能2--20131026

1、效果及功能说明

当鼠标点击小图片的时候可以切换到大图片上来放大图片，后小图片的也会更新到大图片上

2、实现原理

在这边进行了修改就是上一个版本显示出html5的图片但是在线图片没有效果现在这个版本是直接取得 src里面的地址大小图片也只有一个地址，这样就简化了很多，只是在做图片的上面有一些要求就是所有的图片都是以大图片为准，小图片的坑也是填入大图片，因为都是一个地址当小图片放到大图片上就会失真所以小图片其实也是 大图片的尺寸只是在小图片上定义了大小所以显示出来的是 小图片当点击后被大图片获取到了路径那么就变成了图片原来的尺寸就不会失真了，而且还加入的循环在后台通过tms循环的时候是每个.jh-by-nr1都是独立的互不干扰。


3、主要的方法

(function(S){
        //定于获得图片和链接的地址的方法下面是循环整个div
	var DOM=S.DOM;
	var $=S.all;
	var Event=S.Event;
	S.use("sizzle",function(){
		var length=$(".jh-by-nr1").length;
		for(var i=1;i<=length;i++){
                                //定义点击事件当点击小图片后大图片获得小图片方法
				Event.on('.imgList_'+i+' li img','click',function(){
                                //获得小图片的地址
				var oImgSrc=DOM.attr(this,"src");
                                //将循环的这个div包括里面的内容显示到页面上
				var oHref=DOM.attr(this,"data-href");
                                //获得当前的属性
				var parent=DOM.parent(DOM.parent(this));
                                //获得循环后的值
				var index=DOM.attr(parent,"index");
                                //循环后的class 里面包含了获得图片的方法
				DOM.attr($('.multi_'+index),{src:oImgSrc});
                                //循环后的class 里面包含了获得连接地址的方法
				DOM.attr($('.imglj_'+index),{href:oHref});
			})
		}
	})
})(KISSY)

4、全部语句

<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script> 

<div class="demo">
	<a class="xxx" href="xxx" target="_blank">
		#if($item.imgUrl_1)<img class="multi_$velocityCount" src="$item.imgUrl_1" width="470" height="250" />
	</a>
</div>
<ul class="imgList_$velocityCount" index="$velocityCount">
($item.imgUrl_2)<li><img data-href="$item.linkUrl_1"  src="$item.imgUrl_2" width="75" height="75" /></li>
<li><img data-href="$item.linkUrl_2"  src="$item.imgUrl_3" width="75" height="75" /></li>
<li><img data-href="$item.linkUrl_3"  src="$item.imgUrl_4" width="75" height="75" /></li>
<li><img data-href="$item.linkUrl_4"  src="$item.imgUrl_5" width="75" height="75" /></li>
<li><img data-href="$item.linkUrl_5"  src="$item.imgUrl_6" width="75" height="75" /></li>
<li><img data-href="$item.linkUrl_6"  src="$item.imgUrl_7" width="75" height="75" /></li>
</ul>

<script>
(function(S){
	var DOM=S.DOM;
	var $=S.all;
	var Event=S.Event;
	S.use("sizzle",function(){
		var length=$(".jh-by-nr1").length;
		for(var i=1;i<=length;i++){
				Event.on('.imgList_'+i+' li img','click',function(){
				var oImgSrc=DOM.attr(this,"src");
				var oHref=DOM.attr(this,"data-href");
				var parent=DOM.parent(DOM.parent(this));
				var index=DOM.attr(parent,"index");
				DOM.attr($('.multi_'+index),{src:oImgSrc});
				DOM.attr($('.imglj_'+index),{href:oHref});
			})
		}
	})
})(KISSY)

</script>