编程 Javascript

原生JS实现图片左右轮播

Posted in Javascript onDecember 30, 2016

本效果使用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实现图片左右轮播

- Author -

何问起

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript Ext JS 状态默认存储时间

Feb 15 Javascript

js实现无需数据库的县级以上联动行政区域下拉控件

Aug 14 Javascript

限制上传文件大小和格式的jQuery插件实例

Jan 24 Javascript

浅谈JavaScript的内置对象和浏览器对象

Jun 03 Javascript

JS异步文件上传（兼容IE8+）

Apr 02 Javascript

js实现本地图片文件拖拽效果

Jul 18 Javascript

js实现鼠标跟随运动效果

Aug 02 Javascript

Vue.JS项目中5个经典Vuex插件

Nov 28 Javascript

详解ES6中的三种异步解决方案

Jun 28 Javascript

three.js实现圆柱体

Dec 30 Javascript

element跨分页操作选择详解

Jun 29 Javascript

javascript实现拼图游戏

Jan 29 Javascript

零基础轻松学JavaScript闭包

Dec 30 #Javascript

Html5+jQuery+CSS制作相册小记录

Dec 30 #Javascript

Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法

Dec 30 #Javascript

bootstrap表格分页实例讲解

Dec 30 #Javascript

js中数组的常用方法小结

Dec 30 #Javascript

原生js实现可爱糖果数字时间特效

Dec 30 #Javascript

JS实现颜色梯度与渐变效果完整实例

Dec 30 #Javascript