编程 Javascript

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无缝滚动效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

- Author -

酷扬

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

Javascript 相关文章推荐

jquery HotKeys轻松搞定键盘事件代码

Aug 30 Javascript

jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包

Apr 06 Javascript

基于jquery的仿百度搜索框效果代码

Apr 11 Javascript

caller和callee的区别介绍及演示结果

Mar 10 Javascript

js插件方式打开pdf文件(浏览器pdf插件分享)

Dec 20 Javascript

Jquery中扩展方法extend使用技巧

Aug 24 Javascript

Google 地图API资料整理及详细介绍

Aug 06 Javascript

React组件重构之嵌套+继承及高阶组件详解

Jul 19 Javascript

实例详解BootStrap的动态模态框及静态模态框

Aug 13 Javascript

详解搭建es6+devServer简单开发环境

Sep 25 Javascript

JavaScript多种图形实现代码实例

Jun 28 Javascript

vue 通过绑定事件获取当前行的id操作

Jul 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