html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果

本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码，供大家参考，具体内容如下

首先应该区分样式中的绝对定位和相对定位，一般来说，移动的单位为绝对定位，在这个实例中，移动的Ul就是绝对定位，否则它根本无法滚动，而它相对于div1滚动，则div1就作为他的相对定位。

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;这段代码是实现无缝滚动的核心，使之可以在不论左右滚动的时候都有下一步图片接上去。

在操作或者进行比较的时候，都要用offset取值来进行操作或者比较！！！

代码：

无缝滚动2

padding: 0;

margin:0;

}

#div1{

position: relative;

width: 800px;

height: 200px;

background:red;

margin:100px auto;

overflow: hidden;

}

#div1 ul{

position: absolute;

left: 0;

top: 0;

}

#div1 ul li{

float: left;

list-style: none;

width: 200px;

height: 200px;

}

window.οnlοad=function()

{

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

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

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

var aA = document.getElementsByTagName('a');

var speed = 3;

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

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

var timer=setInterval(move,30);

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';

};

oDiv.οnmοuseοver=function()

{

clearInterval(timer);

};

oDiv.οnmοuseοut=function()

{

timer=setInterval(move,30);

};

aA[0].οnclick=function()

{

speed=-3;

};

aA[1].οnclick=function()

{

speed=3;

};

向左

向右

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果相关推荐

html5 签到系统功能,项目实战之基于JavaScript实现每日签到打卡轨迹功能
今天扣丁学堂HTML5培训老师给大家介绍一下关于js实现每日签到打卡轨迹功能的具体代码,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧. 1.核心文件calendar.js var c ...
html5 打字机效果,使用JavaScript制作打字机文本效果
我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介.我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如轻量级响应式jQuery打字机特效插件和逼真的js打 ...
js 写html加载中的效果,基于javascript实现页面加载loading效果
本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下效果图: 正在载入正在载入首页,请稍候. var line = "||" var ...
基于javascript的div浮动效果代码
今天接到一个添加网页图片浮动的任务,花了一中午的时间进行了学习和编码,实现了两种方式的图片浮动,这里把遇到的问题和解决的方法做一个总结. 两种实现分别为:1)Z字形浮动 2)反弹浮动: 具体来说,需 ...
HTML5实现网页计算器清空操作,基于JavaScript实现网页计算器
本文实例为大家分享了JavaScript实现网页计算器的扫雷游戏的具体代码,供大家参考,具体内容如下先看效果: 此外,计算器还附有数字.运算符检查功能: 下贴源码: 计算器 var oper1=pr ...
html5 图片粒子效果,Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图片是通过im ...
php活动倒计时代码,JavaScript实现活动倒计时效果的代码分享
这篇文章主要为大家详细介绍了基于JavaScript实现活动倒计时效果,距离活动时间还剩多少,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js倒计时效果的具体代码,供大家参考 ...
html使用javascript实现图片滚动无缝拼接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
基于JavaScript实现放大镜效果
基于JavaScript实现放大镜效果描述:右侧图片必须是左侧图片的倍数大,主要是获取鼠标相对与被触发元素的坐标位置,再通过位置定位实现效果 <!DOCTYPE html> <ht ...

html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果

html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果相关推荐

最新文章

热门文章