09/8
2015
现在支付宝在二维码付款时，右上角有个帮助区域，可以切换两张图片。这时候我想到了一个问题，如果这里是使用banner切换的思路做的话——那样的话图片需要用排列，圆点指示器也得用html元素做出来，用在这么简单的一个地方，就显得太繁重了。于是我看了下源代码，不得不赞一声，毕竟是支付宝，人家不会像我一样低级。
支付宝是怎么做的呢？一个图片容器，里面两张图片，就这么简单。
你可能会问，指示器哪里去了呢？其实支付宝这里的指示器是做到图片上的，当图片切换的时候，指示器看起来就像是切换了一样。我一看到指示器和切换，就想到banner那里去了，这是思维定势，毕竟图样图森破。
但是我们点击指示器的时候，图片确实会切换。我想了一下，应该是在鼠标点击时判断点击位置，如果点击在左半边，图片就切换到第一张；如果点击在右半边，图片就切换到第二张。
于是做了个demo：
做出来之后才发现一件好玩的事情，指示器（实际上并没有真正的指示器）的心理作用大于实际作用，因为你即使在指示器之外点击鼠标（哪怕是点击图片左上角和右上角），图片也会正确的切换。
如果要切换的图片多的话，用这种方法就不那么简便了。
支付宝没做自动切换功能，我在这个demo里做了。不过在步骤提醒这样的地方，还是让用户自己操纵比较好，免得乱切影响用户体验。
html代码如下：
<div class="switchImgBox">
<img src="test1.jpg" alt="">
<img src="test2.jpg" alt="" style="display: none;">
</div>
点击切换图片代码：
function addEvent(obj,xEvent,fn) {//区别浏览器来添加鼠标滚轮事件
if(obj.attachEvent){
obj.attachEvent('on'+xEvent,fn);
}else{
obj.addEventListener(xEvent,fn,false);
}
}
//添加事件
addEvent(document.getElementsByClassName("switchImgBox")[0],"click",switchImg);
/*自动切换结束*/
function switchImg (event) {
var e = window.event||event;//处理火狐中event的兼容性
var clickX=e.clientX-$(".switchImgBox")[0].offsetLeft;//获取鼠标点击位置相对于图片容器的水平坐标
if (clickX<$(".switchImgBox").eq(0).width()/2) {//如果点击位置在图片区域的左侧
$(".switchImgBox img").eq(0).fadeIn("slow");
$(".switchImgBox img").eq(1).fadeOut("slow");
}else{
$(".switchImgBox img").eq(1).fadeIn("slow");
$(".switchImgBox img").eq(0).fadeOut("slow");
};
}[/code]
在火狐中，event不是全局的，所以只能由触发事件的元素传出。
被jq坑的也不轻，因为用jq获取到的元素经常是objcet，所以要用eq选取之后才能使用作用于html元素的属性和方法。如果点击时传递this出来，也是[objcet window]，这些地方一直让我头大。所以这个封装的函数没能改成具有通用性的函数。
查看demo
