js-小效果-无缝滚动
<!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-小效果-无缝滚动的更多相关文章
- JS 阶段小练习~ 无缝滚动
结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...
- js文字的无缝滚动(上下)
使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...
- marquee标签实现跑马灯效果--无缝滚动
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...
- js实现标准无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js动画之无缝滚动
效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- JS 在 HTML 无缝滚动
marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...
- js原生实现 无缝滚动图片
<!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...
- js实现表格无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 图片滚动js 实现图片无缝滚动
在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...
- js小效果:返回顶部 scrollTop 。 滚屏:animate
返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...
随机推荐
- mysql 如何设置自动增长序列 sequence(一)
背景:由于项目需要,必须用mysql设置主键自增长,而且想用字符串的.经过上网查找并且实验,终于做出了一套方案.现在就共享给大家! 解决思路:由于mysql不带sequence,所以要手写的,创建一张 ...
- Oracle 10g Block Change Tracking特性
Using Block Change Tracking to Improve Incremental Backup Performance 使用块改变跟踪改善增量备份的性能 The block cha ...
- phpcms v9最常用的22个调用代码
新源网络工作室友情总结phpcms v9最常用的22个调用代码: 调用最新文章,带所在版块{pc:get sql="SELECT a.title, a.catid, b.catid, b.c ...
- [Linux] 解压tar.gz文件,解压部分文件
遇到数据库无法查找问题原因,只能找日志,查找日志的时候发现老的日志都被压缩了,只能尝试解压了 数据量比较大,只能在生产解压了,再进行查找 文件名为*.tar.gz,自己博客以前记录过解压方法: h ...
- 使用VS把ASP.NET 5的应用发布到Linux的Docker上
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:我相信未来应用程序的部署模式首选一定会是Docker,所以.NET社区的朋友也不应该忽 ...
- easyui tree折叠
标签 <div id="buildDiv" data-options="region:'center'" title="楼栋权限" s ...
- LeetCode——Same Tree(判断两棵树是否相同)
问题: Given two binary trees, write a function to check if they are equal or not. Two binary trees are ...
- ArrayList集合&特殊集合
一.ArrayList集合 集合内可以放不同类型的元素 另:object类型为所有数据类型的基类 添加元素:.add(); 清空集合:al.clear(); 克隆集合:.clone(); 判断是否包含 ...
- poj2184 01背包变形,价值为可为负数
题目链接:http://poj.org/problem?id=2184 题意:每行给出si和fi,代表牛的两个属性,然后要求选出几头牛,满足S与F都不能为负数的条件下,使S与F的和最大. tips:动 ...
- nodejs随记01
EventEmitter var stream = require('stream'); var Readable = stream.Readable; //写入类(http-req就是),初始化时会 ...