原生JS實(shí)現(xiàn)圖片左右輪播
更新時(shí)間：2016年12月30日 11:43:33 作者：何問(wèn)起
本文主要分享了原生JS實(shí)現(xiàn)圖片左右不停運(yùn)動(dòng)的完整示例代碼，可直接保存到HTML文檔打開可以查看效果。下面跟著小編一起來(lái)看下吧
本效果使用js實(shí)現(xiàn)，當(dāng)圖片移動(dòng)到200像素后回到0像素再向右移動(dòng)200像素一直左右移動(dòng)，不需要marquee標(biāo)簽。
完整的HTML代碼如下，保存到HTML文檔打開可以查看效果：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JS使圖片左右移動(dòng)_何問(wèn)起</title>
<meta charset="utf-8" />
<base target="_blank" />
<style>a{color:blue;}</style>
</head>
<body>
<p>mag:</p><input type="text" id="pos" /><br />
<input type="button" onclick="move()" value="開始" />請(qǐng)點(diǎn)擊按鈕<br />
<div style="position:relative;min-width:600px;min-height:120px;">
<img id="img" style="position:absolute; left:100px;" src="http://hovertree.com/themes/hvtimages/hlogo.png" />
</div>
<div><a >查看代碼</a> <a >返回首頁(yè)</a> <a >更多特效</a></div>
<script>
var hovertreeStep, hovertreeTurn = true;
function move() {
var mag = parseInt(document.getElementById("img").style.left);
document.getElementById("pos").value = mag;
if (hovertreeTurn) {
hovertreeStep = 1; hovertreeTurn = false;
}
if ( mag > 200) {
hovertreeStep = -1;
}
if (mag < 1)
{
hovertreeStep = 1;
}
document.getElementById("img").style.left = (mag + hovertreeStep) + "px";
window.setTimeout("move()", 50);
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
JS?const關(guān)鍵字生成常量的三個(gè)特點(diǎn)介紹
這篇文章主要介紹了JS?const關(guān)鍵字生成常量有哪些特點(diǎn)，下面通過(guò)代碼演示const關(guān)鍵字聲明的常量的塊級(jí)作用域效果，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Jquery對(duì)數(shù)組的操作技巧,需要的朋友可以參考下2014-03-03
JavaScript實(shí)現(xiàn)下載base64數(shù)據(jù)并兼容低版本
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)下載base64數(shù)據(jù)并兼容低版本,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
處理Axios返回Promise對(duì)象的幾種常見方式
Axios返回的是Promise對(duì)象,這意味著可以使用Promise的.then()、.catch()和.finally()方法來(lái)處理異步操作的結(jié)果,本文詳細(xì)介紹了處理Axios返回Promise對(duì)象的幾種常見方式,需要的朋友可以參考下2024-09-09
JavaScript架構(gòu)前端監(jiān)控搭建過(guò)程步驟
這篇文章主要為大家介紹了JavaScript架構(gòu)前端監(jiān)控搭建過(guò)程步驟，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
JavaScript中的標(biāo)簽語(yǔ)句用法分析
這篇文章主要介紹了JavaScript中的標(biāo)簽語(yǔ)句用法,實(shí)例分析了標(biāo)簽語(yǔ)句的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-02-02
簡(jiǎn)單實(shí)現(xiàn)js無(wú)縫滾動(dòng)效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)js無(wú)縫滾動(dòng)效果，js輪播圖實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
js前端如何寫一個(gè)精確的倒計(jì)時(shí)代碼
關(guān)于寫倒計(jì)時(shí)大家可能都都比較熟悉，使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計(jì)時(shí)這樣寫沒有問(wèn)題，但是如果是長(zhǎng)時(shí)間的倒計(jì)時(shí)，這樣寫就會(huì)不準(zhǔn)確2019-10-10
Js實(shí)現(xiàn)復(fù)選框的全選、全不選反選功能代碼實(shí)例
這篇文章主要介紹了Js實(shí)現(xiàn)復(fù)選框的全選、全不選和反選,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02