编程 Javascript

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 相关文章推荐

High Performance JavaScript(高性能JavaScript)读书笔记分析

May 05 Javascript

javascript清空table表格的方法

May 14 Javascript

js限制文本框的输入内容代码分享（3类）

Aug 20 Javascript

require.js的用法详解

Oct 20 Javascript

js实现完美兼容各大浏览器的人民币大小写相互转换

Oct 29 Javascript

AngularJS监听路由的变化示例代码

Sep 23 Javascript

Vue.js组件使用开发实例教程

Nov 01 Javascript

JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法

Jun 19 Javascript

JS文件中加载jquery.js的实例代码

May 05 jQuery

Koa2微信公众号开发之消息管理

May 16 Javascript

微信小程序登录数据解密及状态维持实例详解

May 06 Javascript

LayUI动态设置checkbox不显示的解决方法

Sep 02 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