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 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
编写PHP的安全策略
2006/10/09 PHP
PHP操作xml代码
2010/06/17 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
javascript基本算法汇总
2016/03/09 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
JavaScript实现音乐导航效果
2020/11/19 Javascript
Python实现字典依据value排序
2016/02/24 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python实现图片插入文字
2019/11/26 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
枚举与#define宏的区别
2014/04/30 面试题
UNIX文件系统常用命令
2012/05/25 面试题
创业计划书如何吸引他人眼球
2014/01/10 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
新入职员工工作总结
2015/10/15 职场文书