脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 原生JS 图片左右轮播

原生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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js实现旋转木马轮播图效果

    js实现旋转木马轮播图效果

    这篇文章主要为大家详细介绍了js实现旋转木马轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS const关键字生成常量的三个特点介绍

    JS const关键字生成常量的三个特点介绍

    这篇文章主要介绍了JS const关键字生成常量有哪些特点，下面通过代码演示const关键字声明的常量的块级作用域效果，需要的朋友可以参考下
    2023-05-05
  • Jquery对数组的操作技巧整理

    Jquery对数组的操作技巧整理

    这篇文章主要介绍了Jquery对数组的操作技巧,需要的朋友可以参考下
    2014-03-03
  • JavaScript实现下载base64数据并兼容低版本

    JavaScript实现下载base64数据并兼容低版本

    这篇文章主要为大家详细介绍了如何使用JavaScript实现下载base64数据并兼容低版本,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • 处理Axios返回Promise对象的几种常见方式

    处理Axios返回Promise对象的几种常见方式

    Axios返回的是Promise对象,这意味着可以使用Promise的.then()、.catch()和.finally()方法来处理异步操作的结果,本文详细介绍了处理Axios返回Promise对象的几种常见方式,需要的朋友可以参考下
    2024-09-09
  • JavaScript架构前端监控搭建过程步骤

    JavaScript架构前端监控搭建过程步骤

    这篇文章主要为大家介绍了JavaScript架构前端监控搭建过程步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • JavaScript中的标签语句用法分析

    JavaScript中的标签语句用法分析

    这篇文章主要介绍了JavaScript中的标签语句用法,实例分析了标签语句的功能、定义及相关使用技巧,需要的朋友可以参考下
    2015-02-02
  • 简单实现js无缝滚动效果

    简单实现js无缝滚动效果

    这篇文章主要教大家如何简单实现js无缝滚动效果，js轮播图实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js前端如何写一个精确的倒计时代码

    js前端如何写一个精确的倒计时代码

    关于写倒计时大家可能都都比较熟悉，使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题，但是如果是长时间的倒计时，这样写就会不准确
    2019-10-10
  • Js实现复选框的全选、全不选反选功能代码实例

    Js实现复选框的全选、全不选反选功能代码实例

    这篇文章主要介绍了Js实现复选框的全选、全不选和反选,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02

最新评论