<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
list-style: none;
}
#box{
width:1102px;
position:relative;
height:152px;
overflow: hidden;
border:1px solid #000;
margin: 50px auto;
}
#ul{
position: absolute;
left:0;
top:0;
}
#ul li{
width:200px;
height:150px;
float:left;
padding:0 10px;}
#ul li img{
width:200px;
height:150px;
}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=document.getElementById('ul');
var aLi=oUl.children;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
setInterval(function(){
var l=oUl.offsetLeft-5;
if(l<=-oUl.offsetWidth/2){
l=0;
}
oUl.style.left=l+'px';
},30)
}
</script>
</head>
<body>
<div id="box">
<ul id="ul">
<li><img src="img/banner1.jpg" alt=""/></li>
<li><img src="img/banner2.jpg" alt=""/></li>
<li><img src="img/banner3.jpg" alt=""/></li>
<li><img src="img/banner4.jpg" alt=""/></li>
<li><img src="img/banner5.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>

js-小效果-无缝滚动的更多相关文章

  1. JS 阶段小练习~ 无缝滚动

    结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...

  2. js文字的无缝滚动（上下）

    使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...

  3. marquee标签实现跑马灯效果--无缝滚动

    今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...

  4. js实现标准无缝滚动

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

  5. js动画之无缝滚动

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. JS 在 HTML 无缝滚动

    marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...

  7. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

  8. js实现表格无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  10. js小效果：返回顶部 scrollTop 。 滚屏：animate

    返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...

随机推荐

  1. HDU5556 Land of Farms(二分图 2015 合肥区域赛)

    容易想到将问题转化为求图的独立数问题 ,但求一般图的独立集是一个NPC问题,需要一些转化. 状态压缩,枚举每个上古农场是否选择,然后将剩下的新农场根据i + j奇偶性分为x , y集. 结果为 max ...

  2. bee使用

    beego虽然是一个简单的框架,但是其中用到了很多第三方的包,所以在你安装beego的过程中Go会自动安装其他关联的包. 当然第一步你需要安装Go,如何安装Go请参考我的书 安装beego go ge ...

  3. emc 郵件設置

    1. 進入Data Domain管理界面后,在Administration--->Settings界面.點擊More mail Server--->Set Mail Server---&g ...

  4. JavaScript - 变量，作用域，内存

    JavaScript 变量可以用来保存两种类型的值:基本类型值和应用类型值.基本类型的值源自以下5种基本数据类型:Undefined.Null.Bollean.Number和String. 所有变量都 ...

  5. C语言中main函数的参数

    转自:http://blog.csdn.net/cnctloveyu/article/details/3905720 我们经常用的main函数都是不带参数的.因此main 后的括号都是空括号.实际上, ...

  6. 解决 CentOS网卡eth0启用不了问题

    转自:http://www.centoscn.com/CentosBug/osbug/2014/0423/2850.html [root@localhost Desktop]# service net ...

  7. 智能车学习（二十三）——浅谈心得体会

          因为毕竟是竞赛,跟学校挂钩,没办法开源代码和算法完成思路,所以不能详细写太多,如果可以等价交换的话,应该还是可以向领导申请一下的.       在厦大信科通信系,参加这个比赛,大家都觉得性 ...

  8. 为什么我们可以使用while(~scanf("%d"))读到文件末尾

    经过测试文件末尾是一个标志位EOF 在c语言里我们用int来输出EOF 可以发现EOF等于-1 我们之前那个文章已经写过了..在c语言里负数的存储策略是补码 [-1]的补码=~(1)+1 那么就是比如 ...

  9. 自己yy的fulkson最大流算法

    #include <iostream> #include <cstdio> #include <vector> using namespace std; ; //m ...

  10. 【Filter 页面重定向循环】写一个过滤器造成的页面重定向循环的问题

    今天做一个过滤器,碰上页面重定向循环的情况: 浏览器的访问路径是:http://192.168.16.104:8080/biologyInfo/login/login/login/login/logi ...