JQuery:多张图片的淡入淡出效果。
生活随笔
收集整理的這篇文章主要介紹了
JQuery:多张图片的淡入淡出效果。
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我們要實現一個這樣子的一個動畫：多張圖片在相同的位置淡入淡出，實現圖片的輪流展示。具體實現的思路：
使用定時器setInterval方法，setInterval(<要調用的方法>，時間延時)。 ?根據時間延時循環地調用方法
將多個標簽賦值為數組(全局變量),利用計數變量(全局),然后通過取余數調用不同的標簽對象
fadeToggle(speed,callback) ?，淡入淡出切換，執行效果時間為speed，當執行100%時執行callback函數
?
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> window.i=0; $(document).ready(function(){window.star=[$("#div1"),$("#div2"),$("#div3")];setInterval(show1,2000);}); function show1(){i++;star[i%3].fadeToggle(1000);star[(i-1)%3].fadeToggle(1000);} </script> <style> div {position: absolute;left: 30px;top: 20px; width:80px; height:80px; } </style> </head><body><div id="div1" style="background-color:red;"></div><div id="div2" style="display:none;background-color:green;"></div><div id="div3" style="display:none;background-color:blue;"></div> </body> </html>當然也可將圖片路徑賦值給數組，更改標簽的src屬性。實現圖片的淡入淡出效果。思路和上述一樣。本實例是三個矩形：紅色矩形、綠色矩形、藍色矩形的輪流展示.
總結
以上是生活随笔為你收集整理的JQuery:多张图片的淡入淡出效果。的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Visual stuidio 快捷键的修
- 下一篇： 编译实验(一)词法分析