javascript实现可改变滚动方向的无缝滚动实例


Posted in Javascript onJune 17, 2013

代码:

<!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 type="text/css"> 
*{ margin:0; padding:0;} 
#imgMove{ height:205px; width:624px; border:#000 1px solid; position:relative; margin:200px auto;overflow:hidden;} 
#imgMove ul{ height:205px;position:absolute; left:0; overflow:hidden;} 
#imgMove li{ list-style:none; float:left; height:205px; width:156px; margin:0;} 
a img,img{ border:none;} 
span{ z-index:999;height:68px; width:68px; display:none;position:absolute; cursor:pointer;} 
#moveLeft{left:0; top:68px; } 
#moveRight{right:-10px; top:68px;} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
var oDiv=document.getElementById('imgMove'); 
var oUl=oDiv.getElementsByTagName('ul')[0]; 
var oli=oUl.getElementsByTagName('li'); 
var liSpeed=1; 
var ospan=oDiv.getElementsByTagName('span'); 
var rightmove=document.getElementById('moveRight'); 
var leftmove=document.getElementById('moveLeft'); 
function show(){ 
ospan[0].style.display="block"; 
ospan[1].style.display="block"; 
} 
oUl.onmouseover=function (){ 
show(); 
} 
oUl.onmouseout=function(){ 
ospan[0].style.display="none"; 
ospan[1].style.display="none"; 
} 
ospan[0].onmouseover=function(){ 
liSpeed=1; 
show();/*加这个函数是为了去除向左向右的图片闪动*/ 
} 
ospan[1].onmouseover=function(){ 
liSpeed=-1; 
show();/*加这个函数是为了去除向左向右的图片闪动*/ 
} oUl.style.width=oli[0].offsetWidth*oli.length+'px';; 
setInterval(function(){ 
oUl.style.left=oUl.offsetLeft-liSpeed+'px'; 
if(oUl.offsetLeft<-oUl.offsetWidth/2){ 
oUl.style.left=0; 
} 
else if(oUl.offsetLeft>0) 
{ 
oUl.style.left=-oUl.offsetWidth/2+'px'; 
} 
},30) 
} 
</script> 
</head> 
<body> 
<div id="imgMove"> 
<ul> 
<li><a href="#"><img src="images/1.png" /></a></li> 
<li><a href="#"><img src="images/2.png" /></a></li> 
<li><a href="#"><img src="images/3.png" /></a></li> 
<li><a href="#"><img src="images/4.png" /></a></li> 
<li><a href="#"><img src="images/1.png" /></a></li> 
<li><a href="#"><img src="images/2.png" /></a></li> 
<li><a href="#"><img src="images/3.png" /></a></li> 
<li><a href="#"><img src="images/4.png" /></a></li> 
</ul> 
<span id="moveLeft"><img src="images/left.png" /></span> 
<span id="moveRight"><img src="images/right.png" /></div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
浅析node.js的模块加载机制
May 25 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 #Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 #Javascript
js二级地域选择的实现方法
Jun 17 #Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 #Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 #Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 #Javascript
js特效,页面下雪的小例子
Jun 17 #Javascript
You might like
PHP与javascript对多项选择的处理
2006/10/09 PHP
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php中大括号作用介绍
2012/03/22 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PDO::query讲解
2019/01/29 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
javascript分页代码(当前页码居中)
2012/09/20 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
JavaScript闭包相关知识解析
2019/10/19 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python 实现字符串下标的输出功能
2020/02/13 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
技术总监个人的自我评价范文
2013/12/18 职场文书
社区志愿者心得体会
2014/01/03 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers