<!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. 11g 使用rman duplicate复制数据库，创建辅助实例

    一,创建所需目录 1)创建审计文件目录 PROD1@dbrac1 /dsg/oracle11$ cd $ORACLE_BASE/admin PROD1@dbrac1 /u01/app/oracle/a ...

  2. HR外包系统 - 客户公司薪资规则 报表需求 记入系统

    1 薪酬规则,包括 常用薪资项目 2 报表需求,特别是报表排序规则 3 特殊项说明记录 另外包括客户公司监控的日期设置

  3. 趣味算法：字符串反转的N种方法（转）

    老赵在反对北大青鸟的随笔中提到了数组反转.这的确是一道非常基础的算法题,然而也是一道很不平常的算法题(也许所有的算法深究下去都会很不平常).因为我写着写着,就写出来8种方法……现在我们以字符串的反转为 ...

  4. 在Salesforce中向Page Layout中添加Visualforce Page

    在Salesforce中可以向Object所对应的Layout中添加我们自定义的Visualforce Page. 此时的Visualforce Page与Asp.Net MVC中的Partial V ...

  5. 【转】备份Kylin的元数据

    http://blog.csdn.net/jiangshouzhuang/article/details/51290239 Kylin组织它所有的元数据(包括cube descriptions and ...

  6. POJ 1743 后缀数组

    题目链接:http://poj.org/problem?id=1743 题意:给定一个钢琴的音普序列[值的范围是(1~88)],现在要求找到一个子序列满足 1,长度至少为5 2,序列可以转调,即存在两 ...

  7. 20145223《Java程序程序设计》第7周学习总结

    20145223 <Java程序设计>第7周学习总结 教材学习内容总结 ·时间的度量: (1)格林威治标准时间 (2)世界时 (3)国际原子时 (4)世界协调时间 (5)Unix时间 (6 ...

  8. Java基础语法的学习

    首先就是关于枚举类型的思考与实践,这个是在jdk5.0及以后的版本才有的,然后对枚举类型进行动手操作. 源代码: package test; public class EnumTest { publi ...

  9. Dapper ORM 用法—Net下无敌的ORM(转)

    假如你喜欢原生的Sql语句,又喜欢ORM的简单,那你一定会喜欢上Dapper这款ROM.点击下载Dapper的优势:1,Dapper是一个轻型的ORM类.代码就一个SqlMapper.cs文件,编译后 ...

  10. 怎么提高Jquery性能

    很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 1. 使用最新版本的jQuery jQuery的版本更新很快,你 ...