电子相册动画版
視頻課堂https://edu.csdn.net/course/play/7621
使用純粹的javascript來實現的代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>動畫相冊</title><!--2.第2步設計頁內樣式--><style>img{width:320px;height: 460px;}</style><!--3.第3步設計動態的js--><script>var num=0;function back(){var img=document.getElementById("img");num--;if(num<0)num=9;img.src="img/"+num+".jpg";}function next(){var img=document.getElementById("img");num++;if(num>9)num=0;img.src="img/"+num+".jpg";}</script></head><body><!--1.第一步設計頁內布局--><img src="img/0.jpg" id="img" /><br /><button οnclick="back()">后退</button><button οnclick="next()">前進</button></body> </html>使用jQuery代碼來實現的代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>img{display: block;width: 320px;height: 460px;}</style><!--3.使用jQuery版本的格式來實現--><script src="js/jquery-1.8.3.min.js"></script></head><body><img src="img/0.jpg" id="img"/><button>后退</button><button>前進</button><script>/*1.找對象；就是找到我們要操作的對象$("button"):找到一批*2.定事件；就是找出來對象要響應的事件;click:代替了onclick*3.匿名函數：就是省略了名稱的函數*///alert($("button").html());//$("button").click(alert('aaa'));$("button").click(function(){var num=0;//alert('bbb');//alert($("button").html());內容一致;//alert($(this).text());//$(this):當前按鈕//attr可以設置對象的屬性或取值；if($(this).text()=="后退"){num--;if(num<0)num=9;}else{num++;if(num>9)num=0;}$("#img").attr("src","img/"+num+".jpg");//調用該函數setInterval("autoRun()",1000);});/*定時功能加上去*/var num=0;function autoRun(){num++;if(num>9)num=0;$("#img").attr("src","img/"+num+".jpg");}</script></body> </html>動畫效果如下：
總結
- 上一篇： HTML5 Web Worker
- 下一篇： 叹息“博客园”的凋零