图片查看器(可拖拽，缩放，轮播)

一直都想写一个图片轮播，可是却一直都没有静下心来，今天终于有时间，就来做个图片查看器吧

功能：拖拽，缩放，还原，轮播，透明度

拖拽实现原理：鼠标按下onmousedown，鼠标移动onmousemove，鼠标松开onmouseup释放鼠标按下和移动的函数，一定是按下鼠标的同时进行移动，这里指的都是鼠标左键！

这里的难点就是清除默认事件，反正我是这样认为的，花了好几个小时才弄出来。写完之后发现，鼠标点一下再松开，图片就粘再指针上了，一直跟着指针跑，郁闷了好久，为什么会发生这种事，仔仔细细看了几十遍代码，才发现原来是写的onmouseup事件没有触发，鼠标按下去肯定会松开，不清除默认事件，自定义的onmouseup是不会执行的，突然间恍然大悟(⊙o⊙)，急忙在onmousedown下添加event.preventDefault，这下总行了吧，果然可以。可是IE7,8怎么都不行，查了一下，又是兼容性！万恶的IE，我也是醉了。。。returnValue加上了，再看IE，怎么还是不行，先让我一个人静静。。。等等，发现怎么效果和没清除默认事件之前是相同的，可是确实清除了默认事件啊，肯定是这句的问题，网上各种百度，终于找到了一种说法，把清除默认事件的语句放在onmousemove中，有点不理解，可是确实没了bug，我觉得应该是onmousemove也有一个onmouseup默认事件

缩放实现原理：改变每张图片的宽度和高度，style.width，style.height

图片轮播原理：把每一张图片放在数组中，这时，数组中的栈方法push，pop和队列方法shift，unshift就可以发挥作用了；不知道这几个方法的看最下面。

简单解释一下方法

例：点击下一张图片

1 arr = [imgObj[0],imgObj[1],imgObj[2]]; 2 arr.push(arr[0]);//第一项添加到数组最后

3 arr.shift();//删除数组第一项

4 //这时数组变为[imgObj[1],imgObj[2],imgObj[0]];

这样第二张图片就移动到数组第一个元素了，

同理可以用unshift()和pop()方法来实现上一张图片。

这样处理的好处是每次只需要对数组的第一个元素进行处理，因为数组第一个元素就是当前的这张图片。

还原实现原理：把图片重置成网页加载完成时的样子，left，top，width，height，opacity，filter等。

改变透明度：看了下腾讯体育http://news.qq.com/photo.shtml的轮播器，貌似就是改变透明度，opacity从0变到1，看起来像动画效果

要注意的就是兼容性，万恶的IE8以前的版本，都不支持opacity，改变透明度的属性是filter=alpha(opacity=100)'【范围0-100】===opacity=1这俩是一个效果

透明度增加，这里用到了定时器setInterval()，透明度大于100时就没有效果了，所以在大于100时要清除定时器clearInterval()

 

 HTML

 1         <div id="divInput">

 2             <input type="button" value="上一张"/>

 3             <input type="button" value="放大"/>

 4             <input type="button" value="还原"/>

 5             <input type="button" value="缩小"/>

 6             <input type="button" value="下一张"/>

 7         </div>

 8         <div id="div">

 9             <li><img class="active" src="../img/1.jpg" /></li>

10             <li><img class="" src="../img/2.jpg" /></li>

11             <li><img class="" src="../img/3.jpg" /></li>

12         </div>        

 

JavaScript

拖拽

 1 //imgObj图片对象

 2 imgObj.onmousedown = function(ev){

 3         var event = window.event || ev;//兼容ie7 8

 4         var position = {x:0,y:0};

 5         position.x = event.clientX - imgObj.offsetLeft;//鼠标点击位置到图片左边的一段距离

 6         position.y = event.clientY - imgObj.offsetTop;

 7         document.onmousemove = function(ev){

 8             var event = window.event || ev;

 9             (event.preventDefault)?event.preventDefault():event.returnValue = false;//阻止默认事件

10             var x = event.clientX - position.x;//移动后的left值

11             var y = event.clientY - position.y;

12             imgObj.style.left = x + 'px';

13             imgObj.style.top = y + 'px';

14         };

15         document.onmouseup = function(){//松开鼠标左键

16             document.onmousedown = null;

17             document.onmousemove = null;

18         };

19     };

放大 

1 var imgObj = document.getElementsByTagName("img");

2     for(var i = 0;i<imgObj.length;i++){

3         if(imgObj[i].className == 'active'){//对当前图片进行操作

4             imgObj[i].style.width = imgObj[i].offsetWidth * 1.1 + 'px';

5             imgObj[i].style.height = imgObj[i].offsetHeight * 1.1 + 'px';

6             break;

7         };

8     };

还原

1 for(var i=0;i<imgObj.length;i++){

2         imgObj[i].style.width = '500px';

3         imgObj[i].style.height = '309px';

4         imgObj[i].style.left = '0';

5         imgObj[i].style.top = '0';

6         imgObj[i].style.opacity = 1;

7         imgObj[i].style.filter = 'alpha(opacity = 100)';

8     };

下一张

 1 var liObj = document.getElementById('div').children;

 2     if(arr[0] == undefined){

 3         for(var i = 0;i<liObj.length;i++){

 4             arr.push(liObj[i].children[0]);

 5         };

 6     };

 7     arr.push(arr[0]);//数组变化为 123->1231->231

 8     arr.shift();

 9     change();

10     arr[0].className = 'active';

11     arr[1].className = '';

12     arr[2].className = '';

定时器改变透明度

var alpha = 40;//从40开始变化

    var speed = 3;//变化速度

    var timer = setInterval(function(){

        alpha =alpha + speed;

        arr[0].style.filter = 'alpha(opacity='+alpha+')';//兼容ie7 8

        arr[0].style.opacity = alpha/100;

        if(alpha >= 100){

            clearInterval(timer);//清除定时器

        };

    },30);

    arr[1].style.opacity = 0.4;//非active图片透明度为40

    arr[2].style.opacity = 0.4;

 

总结：总的来说这次做非常的不顺手，刚开始感觉无从下手，不过后来理了一下思路，就没有那种感觉了。我觉得清除默认事件是难点，是因为我在这个点上折腾的时间最长，好几个小时，不过毕竟做出来了，还是有些成就感的，兼容了IE7、8。还记得以前看见华为官网的无缝滚动轮播，感觉高端大气上档次，下次俺也用jquery做个无缝滚动的轮播器玩玩。

 

 

Array内置方法

栈方法：push(x)将x推入数组最后一项，pop()删除数组最后一项；

队列方法：unshift(x)将x添加到数组第一项，shift()删除数组的第一项。