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 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
用js实现放大镜效果
Oct 28 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
使用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开发中的中文编码问题
2013/08/08 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
django框架自定义用户表操作示例
2018/08/07 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
物流合作计划书
2014/01/10 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
博士生专家推荐信
2014/09/26 职场文书
大二学年个人总结
2015/03/03 职场文书
挂职个人工作总结
2015/03/05 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python