JS左右无缝滚动(一般方法+面向对象方法)


Posted in Javascript onAugust 17, 2012
<!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=GBK" /> 
<title>JS左右无缝滚动(一般方法+面向对象方法)</title> 
<style type="text/css"> 
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } 
.clearfix { *zoom:1; } 
body{background:gray;} 
#wrap{width:810px; height:160px; 
border:1px solid black; 
position:relative; 
left:50%; 
top:50%; 
margin-left:-410px; 
margin-top:200px; 
background:#fff; 
overflow:hidden;} 
#wrap ul{margin:0px; 
padding:0px; 
position:absolute; 
top:0px; 
left:0px;} 
#wrap ul li{ list-style:none; float:left;margin:5px 10px;width:265px;} 
#wrap ul li img{ border:1px black solid; padding:10px;} 
</style> 
<!--script type="text/javascript"> 
window.onload=function(){ //一般方法 
var wrap=document.getElementById("wrap"); 
var wrap_ul=wrap.getElementsByTagName("ul")[0]; 
var wrap_li=wrap.getElementsByTagName("li"); 
wrap_ul.innerHTML+=wrap_ul.innerHTML; 
wrap_ul.style.width=(wrap_li[0].offsetWidth+20)*wrap_li.length+"px"; 
Autoscroll=setInterval(scroll,100); 
function scroll(){ 
wrap_ul.style.left=wrap_ul.offsetLeft-3+"px"; //这里因为ie对offsetLeft的解析不一样,所以ie下必须减大于等于3的数 
if(wrap_ul.offsetLeft<=-wrap_ul.offsetWidth/2){ 
wrap_ul.style.left="0px"; 
}else if(wrap_ul.offsetLeft>=0){ 
wrap_ul.style.left=-wrap_ul.offsetWidth/2+"px"; 
} 
} 
wrap.onmouseover=function(){ 
clearInterval(Autoscroll); 
} 
wrap.onmouseout=function(){ 
Autoscroll=setInterval(scroll,100); 
} 
} 
</script--> 
<script type="text/javascript"> 
function Slide(obj,direction,speed){ //面向对象的方法,可以自由控制方向,speed=>3 ie下可以 
this.container=document.getElementById(obj); 
this.content=this.container.getElementsByTagName("ul")[0]; 
this.lis=this.content.getElementsByTagName("li"); 
this.content.innerHTML+=this.content.innerHTML; 
this.content.style.width=(this.lis[0].offsetWidth+20)*this.lis.length+"px"; 
var that=this 
if(direction=="left"){ 
this.speed=-speed 
}else if(direction=="right"){ 
this.speed=speed 
} 
Slide.prototype.scroll=function(){ 
this.content.style.left=this.content.offsetLeft+this.speed+"px"; 
if(this.content.offsetLeft <= -this.content.offsetWidth/2){ 
this.content.style.left ="0px"; 
}else if(this.content.offsetLeft >=0){ 
this.content.style.left = -this.content.offsetWidth/2 + "px"; 
} 
} 
this.time=setInterval(function(){that.scroll()},100); 
this.container.onmouseover=function(){ 
clearInterval(that.time); 
} 
this.container.onmouseout=function(){ 
that.time=setInterval(function(){that.scroll()},100); 
} 
} 
</script> 
<script type="text/javascript"> 
window.onload=function(){new Slide("wrap","left",5)} 
</script> </head> 
<body> 
<div id="wrap"> 
<ul class="clearfix"> 
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li> 
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li> 
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li> 
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li> 
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript中的面向对象介绍
Jun 30 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
js实现拖动缓动效果
Jan 13 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 #Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 #Javascript
jquery插件制作 提示框插件实现代码
Aug 17 #Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
jquery插件制作 表单验证实现代码
Aug 17 #Javascript
jquery插件制作 图片走廊 gallery
Aug 17 #Javascript
jquery插件制作教程 txtHover
Aug 17 #Javascript
You might like
搜索引擎技术核心揭密
2006/10/09 PHP
php 文章采集正则代码
2009/12/28 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
php中curl使用指南
2015/02/05 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
mui back 返回刷新页面的实例
2017/12/06 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
详解Python多线程
2016/11/14 Python
Python生成密码库功能示例
2017/05/23 Python
pandas数据拼接的实现示例
2020/04/16 Python
用python批量下载apk
2020/12/29 Python
介绍一下代理模式(Proxy)
2014/10/17 面试题
单位作风建设自查报告
2014/10/23 职场文书
学校标语口号大全
2015/12/26 职场文书
Python中的 enumerate和zip详情
2022/05/30 Python