JavaScript无缝滚动效果的实例代码


Posted in Javascript onMarch 27, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
  * {
  padding: 0;
  margin: 0;
  }
 .box {
 width: 600px;
 height: 200px;
 margin: 60px auto;
 overflow: hidden;
 position: relative;
 }
 ul {
  list-style-type: none;
  width: 2000px;
  position: absolute;
  top: 0;
  left: 0;
 }
 li {
  float: left;
 }
</style>
</head>
<body>
<div class="box" id="box">
 <ul id="gun">
 <li><img src="01.jpg" alt="" /></li>
 <li><img src="02.jpg" alt="" /></li>
 <li><img src="03.jpg" alt="" /></li>
 <li><img src="04.jpg" alt="" /></li>
 <li><img src="01.jpg" alt="" /></li>
 <li><img src="02.jpg" alt="" /></li>
 </ul>
 <script type="text/javascript">
       var box = document.getElementById("box");
       var gun = document.getElementById("gun");
       
       function $(i){
       return document.getElementsByTagName("img")[i];
       }
       var num = 0;
       all();
       function all(){
      var shi= setInterval(fun,5);
      gun.onmouseover=function (){
         clearInterval(shi);
      }
      gun.onmouseout=function (){
         all();
      }
      function fun(){
      if(num<=-1200){
          num=0;
      }else{
         gun.style.left=num+"px";
            num--;
          }  
          }
        } 
 </script>
</div>
</body>
</html>

以上所述是小编给大家介绍的JavaScript无缝滚动效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 #Javascript
javascript实现下雨效果
Mar 27 #Javascript
HTML的select控件美化
Mar 27 #Javascript
JS实现的点击表头排序功能示例
Mar 27 #Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 #Javascript
vue2.0实战之基础入门(1)
Mar 27 #Javascript
jQuery中的deferred使用方法
Mar 27 #jQuery
You might like
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
checkbox使用示例
2013/08/23 Javascript
使用js实现数据格式化
2014/12/03 Javascript
Prototype框架详解
2015/11/25 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python性能提升之延迟初始化
2016/12/04 Python
Python实现图片拼接的代码
2018/07/02 Python
Python中常用的内置方法
2019/01/28 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python3监控疫情的完整代码
2020/02/20 Python
Python更换pip源方法过程解析
2020/05/19 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
加工操作管理制度
2014/01/19 职场文书
测量工程专业求职信
2014/02/24 职场文书
初中生评语大全
2014/04/24 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
国防教育标语
2014/10/08 职场文书
维稳承诺书
2015/01/20 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python