js 图片实现无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul{margin:0;padding:0;}
div{position:relative;width:680px;height:170px;border:1px solid black;margin:10px auto;overflow:hidden;}
ul{position:absolute;left:0;top:0;}
li{width:150px;height:150px;padding:10px;float:left;list-style:none;}
img{width:150px;height:150px;}
</style>
<script>
window.onload = function(){
var oDIV = document.getElementsByTagName('div')[0];
var oUl = oDIV.getElementsByTagName('ul')[0];
var arrLi = oUl.getElementsByTagName('li');
var arrA = document.getElementsByTagName('a'); var timer = null;
var speed = 10;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = arrLi.length*arrLi[0].offsetWidth+'px';
timer = setInterval(scrollPicture,100) arrA[0].onclick = function(){
speed = -10;
};
arrA[1].onclick = function(){
speed = 10;
}; for(var i=0;i<arrLi.length;i++){
arrLi[i].onmouseover = function(){
clearInterval(timer);
} arrLi[i].onmouseout = function(){
timer = setInterval(scrollPicture,100)
}
}
/*原理：走到一半给拉回来*/
function scrollPicture(){
if(oUl.offsetLeft < -oUl.offsetWidth/2){ //向左走
oUl.style.left = 0;
}else if(oUl.offsetLeft >0){
oUl.style.left = -oUl.offsetWidth/2+'px'; //向右走
}
oUl.style.left = oUl.offsetLeft+speed+'px';
} };
</script>
</head> <body>
<a href="javascript:;"> < </a>
<a href="javascript:;"> > </a>
<div>
<ul>
<li><img src="data:images/1.jpg"></li>
<li><img src="data:images/2.jpg"></li>
<li><img src="data:images/3.jpg"></li>
<li><img src="data:images/4.jpg"></li>
</ul>
</div>
</body>
</html>
js 图片实现无缝滚动的更多相关文章
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- jquery 图片自动无缝滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- js原生实现 无缝滚动图片
<!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...
- css 图片的无缝滚动
转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...
- js动画之无缝滚动
效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- js实现标准无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 在 HTML 无缝滚动
marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...
- js文字的无缝滚动（上下）
使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...
随机推荐
- java中字符串相等判断
字符串的判断有2种: 1.判断地址是否相等 用:== 2.判断值是否相等 用:equals方法 Object类作为所有类的超类,而Object类的equals方法是直接比较地址的,源码如下: pu ...
- springboot项目实现jar包外配置文件管理
背景 为实现快速搭建和开发,项目以Springboot框架搭建,springboot搭建的项目可以将项目直接打成jar包并运行,无需自己安装配置Tomcat或者其他服务器,是一种方便快捷的部署方式. ...
- zabbix配置文件详解--服务（server）端、客户（agent）端、代理（proxy）端
在zabbix服务(server)端.客户(agent)端.代理(proxy)端分别对应着一个配置文件,即:zabbix_server.conf,zabbix_agentd.conf,zabbix_p ...
- 《hdu 免费馅饼》
题目描述 免费馅饼 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- LVS + keepalived的实现
! Configuration File for keepalived global_defs { notification_email { linuxedu@foxmail.com mageedu@ ...
- List、Set、数组之间的转换
数组转Collection 使用Apache Jakarta Commons Collections: import org.apache.commons.collections.Collection ...
- 自动化移动安全渗透测试框架：Mobile Security Framework
自动化移动安全渗透测试框架:Mobile Security Framework 译/Sphinx 测试开发社区 7月3日 Mobile Security Framework (移动安全框架) 是一 ...
- Go的sync
关于 pool 的由来可以参考: github issues 文章 sync.Pool 的作用及为什么要用到它 Rob Pike 扩展了sync.pool 类型的文档,并且将其目的描述得更清楚: Po ...
- 美团新零售招聘-高级测试开发（20k-50k/月）
内推邮箱:liuxinguang@meituan.com 地点:北京 职位级别:p2-2以上级别 15.5薪
- Python——9函数式编程②
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...