利用jquery實現多張圖片淡入淡出
阿新 • • 發佈：2019-02-10
功能描述：
圖片播放分為2個順序：正序和反序，正序就是從第一張到最後一張，然後再第一張，反序是從第一張開始，然後最後一張，再到第一張。
1：當沒有滑鼠操作時，圖片正序播放，每隔特定時間播放一次。
2：如果滑鼠從左向右滑動，則圖片跳過間隔時間，播放順序強制切換為正序，立即播放至下一張。
3：如果滑鼠從右向左滑動，則圖片跳過間隔時間，播放順序強制切換為反序，立即播放至下一張。
實現思路：
把所有圖片放在同一位置，初始時只有第一張設為顯示，其他調為display:none.利用fadeToggle（）函式實現圖片淡入淡出，利用setInterval()函式實現自動輪播，如果檢測到滑動事件，則clearInterval(),立即執行輪播函式，完成後開啟setInterval()。
程式碼如下：
<!DOCTYPE html> <html> <head> <script src="jquery-3.2.1.min.js"></script> <script> var i = 0; window.reverse = false; //預設為正序播放 $(document).ready(function(){ picGroup = [$("#div1"),$("#div2"),$("#div3"),$("#div4")]; addlistener(); ID = setInterval(show1,4000); }); function nextPicIndex() //對全域性邊量i進行更改，改為當前博播放順序下的下一張圖片索引 { if(reverse == true) { if(i > 0) { i--; } else { i = 4 -1; } } else { if(i < 3) { i++; } else { i = 0; } } } function show1(){ picGroup[i].fadeToggle(2000); nextPicIndex(); picGroup[i].fadeToggle(2000); } function addlistener() { $("#slide").bind("mousedown",start); } function start(event) { if(event.button == 0) //當滑鼠左鍵還是按下狀態時 { X = event.pageX; Y = event.pageY; $("#slide").bind("mousemove",move); $("#slide").bind("mouseup",stop); } return false; //很關鍵，取消執行瀏覽器預設事件，沒有這一步，該事件執行不了 } function move(event) { X1 = event.pageX; Y1 = event.pageY; return false; //同樣取消瀏覽器預設事件 } function stop() { if(X1 - X > 50) //滑動路程大於50，且為向右滑動 { reverse = false; //正序 clearInterval(ID); //停止當前的interval show1(); //立即執行一次圖片下一張播放 ID = setInterval(show1,4000); //重新開啟interval } else if(X1 - X < -50)//滑動路程大於50，且為向左滑動 { reverse = true; //反序 clearInterval(ID); show1(); ID = setInterval(show1,4000); } $("#slide").unbind("mousemove",move); //左鍵鬆開，則接除繫結滑鼠移動事件 $("#slide").unbind("mouseup",stop); //和左鍵鬆開事件 } </script> <style> div { position: absolute; left: 3px; top: 0px; width:800px; height:800px; } </style> </head> <body> <div id="slide" style="position: absolute; left: 30px; top: 20px; width:800px; height:800px; " > <div id="div1" style="background-color:red;"><img width = "800px" height = "600px" src="img/1.jpg"></img></div> <div id="div2" style="display:none;background-color:green;"><img width = "800px" height = "600px" src="img/2.jpg"></img></div> <div id="div3" style="display:none;background-color:blue;"><img width = "800px" height = "600px" src="img/3.jpg"></img></div> <div id="div4" style="display:none;background-color:blue;"><img width = "800px" height = "600px" src="img/4.jpg"></img></div> </div> </body> </html>