圖片查看器(可拖拽，縮放，輪播)

一直都想寫一個圖片輪播，但是卻一直都沒有靜下心來，今天終於有時間，就來作個圖片查看器吧

功能：拖拽，縮放，還原，輪播，透明度

拖拽實現原理：鼠標按下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;

 

總結：總的來講此次作很是的不順手，剛開始感受無從下手，不事後來理了一下思路，就沒有那種感受了。我以爲清除默認事件是難點，是由於我在這個點上折騰的時間最長，好幾個小時，不過畢竟作出來了，仍是有些成就感的，兼容了IE七、8。還記得之前看見華爲官網的無縫滾動輪播，感受高端大氣上檔次，下次俺也用jquery作個無縫滾動的輪播器玩玩。

 

 

Array內置方法

棧方法：push(x)將x推入數組最後一項，pop()刪除數組最後一項；

隊列方法：unshift(x)將x添加到數組第一項，shift()刪除數組的第一項。