原生JS實(shí)現(xiàn)圖片左右輪播
更新時(shí)間：2016年12月30日 11:43:33 作者：何問起
本文主要分享了原生JS實(shí)現(xiàn)圖片左右不停運(yùn)動(dòng)的完整示例代碼，可直接保存到HTML文檔打開可以查看效果。下面跟著小編一起來看下吧
本效果使用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)_何問起</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="開始" />請點(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 >返回首頁</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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(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)，下面通過代碼演示const關(guān)鍵字聲明的常量的塊級作用域效果，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Jquery對數(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對象,這意味著可以使用Promise的.then()、.catch()和.finally()方法來處理異步操作的結(jié)果,本文詳細(xì)介紹了處理Axios返回Promise對象的幾種常見方式,需要的朋友可以參考下2024-09-09
JavaScript架構(gòu)前端監(jiān)控搭建過程步驟
這篇文章主要為大家介紹了JavaScript架構(gòu)前端監(jiān)控搭建過程步驟，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了JavaScript中的標(biāo)簽語句用法,實(shí)例分析了標(biāo)簽語句的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要教大家如何簡單實(shí)現(xiàn)js無縫滾動(dòng)效果，js輪播圖實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
js前端如何寫一個(gè)精確的倒計(jì)時(shí)代碼
關(guān)于寫倒計(jì)時(shí)大家可能都都比較熟悉，使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計(jì)時(shí)這樣寫沒有問題，但是如果是長時(shí)間的倒計(jì)時(shí)，這樣寫就會(huì)不準(zhǔn)確2019-10-10
Js實(shí)現(xiàn)復(fù)選框的全選、全不選反選功能代碼實(shí)例
這篇文章主要介紹了Js實(shí)現(xiàn)復(fù)選框的全選、全不選和反選,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02