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 toggleClass 实现鼠标移上变色
May 14 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 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
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
JavaScript库 开发规则
2009/01/31 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
老生常谈Python基础之字符编码
2017/06/14 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Django model class Meta原理解析
2020/11/14 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
机电专业个人自荐信格式模板
2013/09/23 职场文书
《学会待客》教学反思
2014/02/22 职场文书
初级党校心得体会
2014/09/11 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
初婚未育证明样本
2015/06/18 职场文书