p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #ad42ef }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
p.p13 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #e48b00 }
p.p14 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4663cc }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #929151 }
span.s7 { color: #060606 }
span.s8 { color: #ad42ef }
span.s9 { color: #d16400 }
span.s10 { color: #698906 }
span.s11 { color: #4a8a01 }
span.s12 { color: #000000 }
span.s13 { color: #4663cc }
span.s14 { color: #a5b2b9 }
span.s15 { color: #e48b00 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

ul,

li {

margin: 0;

padding: 0;

list-style-type: none;

}

img {

height: 300px;

width: 300px;

}

ul {

position: absolute;

left: 0;

top: 0;

}

li {

float: left;

}

#div1 {

height: 300px;

width: 1200px;

background-color: red;

margin: 100px auto;

position: relative;

overflow: hidden;

}

input{

border: 1px solid #8A2BE2;

height: 100px;

width: 200px;

font-size: 20px;

color: white;

background-color: #FFB6C1;

margin-left: 100px;

}

</style>

</head>

<body>

<div id="div1">

<ul>

<li><img src="img/014.jpg" /></li>

<li><img src="img/017.jpg" /></li>

<li><img src="img/018.jpg" /></li>

<li><img src="img/019.jpg" /></li>

</ul>

</div>

<input type="button" value="向左滚动" />

<input type="button" value="向右滚动" />

</body>

<script type="text/javascript">

// 实现无缝滚动，鼠标移入停止滚动，移出继续滚动，以及可以调节滚动方向效果

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

var ul = document.getElementsByTagName("ul")[0];

var liS = document.getElementsByTagName("li");

var timer = null;

var speed = 4;

ul.innerHTML = ul.innerHTML + ul.innerHTML;

ul.style.width = liS[0].offsetWidth * liS.length + "px";

timer = setInterval(move, 30);

oDiv.onmouseover = function() {//实现鼠标移入暂停

clearInterval(timer);

}

oDiv.onmouseout = function() {//鼠标移出继续滚动

timer = setInterval(move, 30);

}

move();//每次执行move()的时候都会延迟30ms，//

/在第一次的实际效果上有瑕疵，在外面调用一次move()

function move() {

if(-ul.offsetLeft > ul.offsetWidth / 2) {//左滚无缝

ul.style.left = 0 + "px";

}

if(ul.offsetLeft > 0) {//右滚无缝

ul.style.left = -ul.offsetWidth / 2 + "px";

}

ul.style.left = ul.offsetLeft + speed + "px";

}

//实现通过按钮改变运动方向的功能

var inputs = document.getElementsByTagName("input");

inputs[0].onclick = function() {

speed = -4;

}

inputs[1].onclick = function() {

speed = 4;

}

</script>

</html>

JS无缝滚动的更多相关文章

  1. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  3. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  4. js无缝滚动跑马灯

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [Js]无缝滚动

    效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向 ...

  6. JS——无缝滚动

    1.描述——无缝滚动图片 2.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. js无缝滚动，不平滑（求高人指点）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. 纯js无缝滚动

    HTML代码 <!--父容器要使用overflow: hidden;--> <div id="imgsList" style="height:150px ...

  9. scrollLeft的相关问题（js横向无缝滚动）

    <div id="demo"> <div id="innerdemo"> <div id="demo1"> ...

随机推荐

  1. div背景图片叠加

    .box1{   width: 500px;   height: 500px;   background: url("")no-repeat,url("")no ...

  2. jsp 错误码debug记录与总结

    500: 编码错误: 无法向cookie中写入中文字符串 需要使用URLEncoder.Encode()在写入处进行转码,使用URLDecoder.decoder()在读取处进行解码 或者使用requ ...

  3. 移动设备页面高度不足时min-height 的尴尬处理

    移动设备页面高度不足时min-height 的尴尬处理 在做html5的页面时,经常遇到页面内容太少撑不起来整个手机屏幕的高度. 我们经常使用min-height来处理,比如min-height:56 ...

  4. 后一个div无法遮挡住前一个有img的div

    这个标题实在是我无奈之下才取出来的,毕竟我文采有限~ 今天我遇到的一个eggpain的问题: 前提:当页面上有两个没有background的div,大小一样,绝对定位在同一个地方(让第二个遮挡住第一个 ...

  5. Qlikview 图标控件实现动态分组

    首先编辑一个组合字段,eg, TimeDimension, 内含2个字段(即为动态可以切换的分组字段) 将TimeDimension 作为分组字段.表达式字段 Sum(Sales),结果如图示 在图片 ...

  6. 第五百八十五天 how can I 坚持

    时间过得真的好快啊,晚上不一会就十一点多了,稍微一堕落,时间就没了,还没来得及好好看会书.. 终于把solr拼音搜索弄好了,明天搞搞suggest. 写字,睡觉.

  7. 让 Terminal/vim 使用 Solarized 配色

    经过亲身体验,终于使用上了solarized的配色,之前配出来相差太多,于是找到这篇参考博文:http://blog.csdn.net/angle_birds/article/details/1169 ...

  8. java基础知识点复习

    第一天: JRE.JDK是什么? Jre java运行环境.Jre = java虚拟机+核心类库(辅助java运行的文件) Jdk:java开发工具集jdk = jre+java的开发工具 2. 配置 ...

  9. Jenkins+Maven+Sonar系统持续集成环境部署以及配置

    一.Jenkins介绍以及安装 什么是持续集成?   随着软件开发复杂度的不断提高,团队开发成员间如何更好地协同工作以确保软件开发的质量已经慢慢成为开发过程中不可回避的问题.尤其是近些年来,敏捷(Ag ...

  10. 通过Percona XtraBackup添加一个slave

    假设我的master是172.16.15.8,要添加的slave是172.16.15.9 1:在主服务器执行备份操作(172.16.15.8) /usr/bin/innobackupex --comp ...