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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
AngularJS快速入门
Apr 02 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
如何基于JS截获动态代码
Dec 25 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
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
JavaScript之编码规范 推荐
2012/05/23 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
django将数组传递给前台模板的方法
2019/08/06 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
python中Django文件上传方法详解
2020/08/05 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
大学校园活动策划书
2014/02/04 职场文书
批评与自我批评材料
2014/02/15 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
困难补助申请报告
2015/05/19 职场文书
2015年教研工作总结
2015/05/23 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python