圖片輪換效果實現(xiàn)代碼(點擊按鈕停止執(zhí)行)
更新時間：2013年04月12日 17:16:53 作者：
在這個實例中需要注意的是，要把images文件夾下圖片的命名設置為有順序的，1、2、3..才可以，感興趣的朋友可以參考下
在這個小程序中，需要把images文件夾下圖片的命名設置為有順序的，1、2、3……
<script type="text/javascript">
var imgnumb = 1;
function imgfor() {
imgnumb++;
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
if (imgnumb == 5) { //共5張圖片
imgnumb = 0;
}
}
var clearid;
function clearfun() {
clearInterval(clearid);
}
clearid=setInterval(imgfor, 500);
</script>
</head>
<body>
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />
<input type="button" value="結束執(zhí)行" onclick="clearfun();" />
</body>
var imgnumb = 1;
function imgfor() {
imgnumb++;
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
if (imgnumb == 5) {
imgnumb = 0;
}
}
var clearid;
function clearfun() {
clearInterval(clearid);
}
clearid=setInterval(imgfor, 500);
</script>
</head>
<body>
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />
<input type="button" value="結束執(zhí)行" onclick="clearfun();" />
</body>
復制代碼 代碼如下:
<script type="text/javascript">
var imgnumb = 1;
function imgfor() {
imgnumb++;
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
if (imgnumb == 5) { //共5張圖片
imgnumb = 0;
}
}
var clearid;
function clearfun() {
clearInterval(clearid);
}
clearid=setInterval(imgfor, 500);
</script>
</head>
<body>
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />
<input type="button" value="結束執(zhí)行" onclick="clearfun();" />
</body>
var imgnumb = 1;
function imgfor() {
imgnumb++;
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
if (imgnumb == 5) {
imgnumb = 0;
}
}
var clearid;
function clearfun() {
clearInterval(clearid);
}
clearid=setInterval(imgfor, 500);
</script>
</head>
<body>
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />
<input type="button" value="結束執(zhí)行" onclick="clearfun();" />
</body>
相關文章
此實例，直接粘貼代碼即可運行，當然圖片的路徑不要忘記改了。2014-06-06
用于在現(xiàn)有窗口上加載蒙板，在蒙板內在嵌入其他頁面內容2010-11-11
在本篇文章中小編給各位整理的是關于js new Date()測試的相關實例代碼，有需要的朋友們參考學習下。2019-10-10
這篇文章主要詳細介紹了babel是如何將class語法糖轉換為es5的語法,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
往往我們需要在 JS 中動態(tài)添加事件，這就涉及到瀏覽器兼容性問題了，以下談及的幾種方法，我們也常?；旌鲜褂?。2008-11-11
這篇文章主要介紹了JS前端知識點總結之內置對象，日期對象和定時器相關操作,簡單總結分析了JS內置對象，日期對象和定時器相關對象方法及使用技巧,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了微信小程序 生成攜帶參數(shù)的二維碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值2019-10-10
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)無縫輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
解決mui框架中switch開關通過js控制開或者關狀態(tài)時小圓點不動的問題
今天小編就為大家分享一篇解決mui框架中switch開關通過js控制開或者關狀態(tài)時小圓點不動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
實例講解javascript實現(xiàn)異步圖片上傳方法
給大家詳細講解一下如何通過javascript寫出異步圖片上傳，并且把實例代碼給大家分享了下，有興趣的讀者們測試一下吧。2017-12-12