<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#div1 {width:400px;height:100px;margin:50px 0 0 350px;overflow: hidden;position: absolute;background: red;}
#div1 ul{position: absolute;left: 0;top: 0;}
#div1 ul li {float: left;width:100px;height: 100px; list-style:none;}
</style>
</head> <body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<a href="javascript:;">中速</a>
<a href="javascript:;">高速</a>
<div id="div1">
<ul>
<li><img src="01.jpg" /></li>
<li><img src="02.jpg" /></li>
<li><img src="03.jpg" /></li>
<li><img src="04.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
var odiv=document.getElementById('div1');
var oul=odiv.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
var speed=-2;
oul.innerHTML=oul.innerHTML+oul.innerHTML;
oul.style.width=oli[0].offsetWidth*oli.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;
}
document.getElementsByTagName('a')[2].onclick=function()
{
speed=-1;
}
document.getElementsByTagName('a')[3].onclick=function()
{
speed=-4;
}
</script>
</body>
</html>

附件下载

利用JavaScript做无缝滚动的更多相关文章

  1. JavaScript实现无缝滚动 原理详细讲解

    先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...

  2. webbrowser内容滚动(javascript内容无缝滚动)

    一 使用webbrowser现有方法 引用:https://blog.csdn.net/xiaokailele/article/details/48392673 public partial clas ...

  3. 利用background-attachment做视差滚动效果

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...

  4. Javascript图片无缝滚动

    http://www.cnblogs.com/shouce/p/5068787.html

  5. (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  6. JS 实现无缝滚动动画原理(初学者入)

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  7. vue 无缝滚动文字

    前言 用vue做无缝滚动,字体弹幕 就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, l ...

  8. JS无缝滚动

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  9. Javascript做图片无缝平滑滚动

    因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

随机推荐

  1. 微信小程序—picker(滚动选择器)

    官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...

  2. KVM之virsh管理虚拟机内存

    调整内存 virsh setmem 命令帮助: [root@ubuntu ~]# virsh setmem --help NAME setmem - change memory allocation ...

  3. vue实现单页应用demo

    vue + webpack +ES6/7 + axiso + vuex + vue-router构建项目前端,node + express + mongodb 开发后台 项目demo地址 https: ...

  4. MySQL创建临时表

    drop TEMPORARY table if EXISTS temp_table; create TEMPORARY table temp_table( id int not null, usern ...

  5. eas之常用源码整理

    //查看是否有相关权限 boolean hasAllotPermission=         PermissionFactory.getRemoteInstance().hasFunctionPer ...

  6. Atcoder AGC031C Differ By 1 Bit (构造、二进制)

    哎呀这个C怎么比B还水....(我现在大概也就会做点这种水题了吧) 题目链接 https://atcoder.jp/contests/agc031/tasks/agc031_c 题目大意 符号约定: ...

  7. java extend 和 implements 的区别

    1. 在类的声明中,通过关键字extends来创建一个类的子类.一个类通过关键字implements声明自己使用一个或者多个接口.extends 是继承某个类, 继承之后可以使用父类的方法, 也可以重 ...

  8. 经验总结18--EF改动关系,多对多

    EF改动关系让我费事蛮多时间.能查的资料少,网上试了非常多方法都不正确. 最后还是自己研究出来了.在这里和大家分享下,有更好的方法也能够分享下. 首先说说我一般做改动功能时,前台传參数,后台使用对象接 ...

  9. HDU 5063 Operation the Sequence(暴力)

    HDU 5063 Operation the Sequence 题目链接 把操作存下来.因为仅仅有50个操作,所以每次把操作逆回去执行一遍,就能求出在原来的数列中的位置.输出就可以 代码: #incl ...

  10. bootstrap搜索样式

    <div class="container"> <div class="input-group"> <input type=&qu ...