原生JS实现图片左右轮播
更新时间：2016年12月30日 11:43:33 作者：何问起
本文主要分享了原生JS实现图片左右不停运动的完整示例代码，可直接保存到HTML文档打开可以查看效果。下面跟着小编一起来看下吧
本效果使用js实现，当图片移动到200像素后回到0像素再向右移动200像素一直左右移动，不需要marquee标签。
完整的HTML代码如下，保存到HTML文档打开可以查看效果：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JS使图片左右移动_何问起</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="开始" />请点击按钮<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 href="http://hovertree.com/h/bjaf/62ak7aig.htm">查看代码</a> <a href="http://hovertree.com">返回首页</a> <a href="http://hovertree.com/texiao/">更多特效</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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了前端进阶之IntersectionObserver示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
下面小编就为大家带来一篇JS实现数字格式千分位相互转换方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
当我们抓取网页端数据时,经常被加密参数、加密数据所困扰,如何快速定位这些加解密函数,尤为重要,下面这篇文章主要给大家介绍了关于JavaScript逆向调试技巧的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了SVG实现时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要为大家详细介绍了更靠谱的横竖屏检测方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
教你如何使用THREEJS实现一个可调节档位、可摇头的电风扇
夏天到了，用Three.js实现一个可以摇头和调节档位的电风扇，主要使用到Blender处理3D模型，用Vite+Typescript搭建项目框架，这篇文章主要介绍了使用THREEJS实现一个可调节档位、可摇头的电风扇,需要的朋友可以参考下2023-06-06
本文主要介绍了js限制文本框只可以输入数字的实例代码，可复制直接调用函数实现其功能。需要的朋友可以看下2016-12-12
这篇文章主要介绍了JS操作字符串转数字的常见方法,结合实例形式分析了javascript字符串类型转换的常用方法及相关操作技巧,需要的朋友可以参考下2019-10-10
TypeScript是JavaScript的超集,具有类型系统,支持ES6语法,支持面向对象编程的概念,下面这篇文章主要给大家介绍了关于TypeScript应该尽量避免的语法,需要的朋友可以参考下2022-04-04
“Promises”渐渐成为JavaScript里最重要的一部分，大量的新API都开始promise原理实现。这篇文章主要为大家详细介绍了JavaScript Promise 用法，感兴趣的小伙伴们可以参考一下2016-06-06
最新评论