Javascript 实现图片无缝滚动


Posted in Javascript onDecember 19, 2014

效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动

可以调整向左或右方向滚动

<style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            #div1 {

                overflow: hidden;

                width: 712px;

                height: 108px;

                margin: 100px auto;

                position: relative;

                background: red;

            }

            #div1 ul {

                position: absolute;

                left: 0;

                top: 0;

            }

            #div1 ul li {

                float: left;

                width: 178px;

                height: 108px;

                list-style: none;

            }

        </style>
<body>

        <a href="javascript:;">向左走</a>

        <a href="javascript:;">向右走</a>

        <div id="div1">

            <ul>

                <li>

                    <img src="img/无缝滚动/1.jpg" />

                </li>

                <li>

                    <img src="img/无缝滚动/2.jpg" />

                </li>

                <li>

                    <img src="img/无缝滚动/3.jpg" />

                </li>

                <li>

                    <img src="img/无缝滚动/4.jpg" />

                </li>

            </ul>

        </div>

    </body>

以上是一个简单的布局,下面是主要的Javascript 代码

<script type="text/javascript">

            window.onload = function() {

                var oDiv = document.getElementById("div1");

                var oUl = oDiv.getElementsByTagName('ul')[0];

                var aLi = oUl.getElementsByTagName('li');

                var speed = 2;            

                oUl.innerHTML += oUl.innerHTML;

                oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

                function move() {

                    if (oUl.offsetLeft < -oUl.offsetWidth / 2) {

                        oUl.style.left = '0';

                    }

                    if (oUl.offsetLeft > 0) {

                        oUl.style.left = -oUl.offsetWidth / 2 + 'px';

                    }

                    oUl.style.left = oUl.offsetLeft + speed + 'px';

                }

                var timer = setInterval(move, 30);

                oDiv.onmouseover = function() {

                    clearInterval(timer);

                };

                oDiv.onmouseout = function() {

                    timer = setInterval(move, 30);

                };

                document.getElementsByTagName('a')[0].onclick = function() {

                    speed = -2;

                };

                document.getElementsByTagName('a')[1].onclick = function() {

                    speed = 2;

                };

            }

        </script>

简单讲下思路:

首先设置ul 里面的图片一共有8张 oUl.innerHTML += oUl.innerHTML;

在 计算ul的宽度为 li的实际宽度*8

之后将 多余的内容隐藏

注意 : oUl.offsetLeft 肯定是负值

所以判断的时候不要把负号漏掉

if (oUl.offsetLeft < -oUl.offsetWidth / 2) { 

        oUl.style.left = '0';                  
}

这段表示  图片滚动到一半了,迅速把图片拉回来,因为程序执行的太快,所以几乎看不出来 实现无缝滚动

最后使用 变量 speed 来控制左右方向的滚动。

以上代码只是实现了最基本的功能,小伙伴们可以在此基础上继续完善。

Javascript 相关文章推荐
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 #Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 #Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 #Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 #Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 #Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 #Javascript
jQuery实现视频作为全屏幕背景
Dec 18 #Javascript
You might like
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
写自已的js类库需要的核心代码
2012/07/16 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
用C++封装MySQL的API的教程
2015/05/06 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python安装scipy的方法步骤
2019/06/26 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python Collatz序列实现过程解析
2019/10/12 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
Linux常见面试题
2016/10/04 面试题
日语专业个人求职信范文
2014/02/02 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
怎样写离婚协议书
2015/01/26 职场文书
销售员岗位职责范本
2015/04/11 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server