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 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
js改变Iframe中Src的方法
May 05 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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
MySQL相关说明
2007/01/15 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
php多任务程序实例解析
2014/07/19 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
实例讲解PHP表单
2020/06/10 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
昆虫记读书笔记
2015/06/26 职场文书
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
Redis特殊数据类型bitmap位图
2022/06/01 Redis