JS图片无缝滚动(简单利于使用)


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=gb2312" />
<title>滚动代码</title>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
.left_1{ width:500px; height:100px; margin:0 auto;}
.left_1 ul{}
.left_1 li{ float:left; width:120px; height:100px; line-height:100px; text-align:center;}
.left_1 p{ width:50px; he
 100px; line-height:100px;}
.left_1_i div{ width:100px; height:100px; line-height:100px; border:1px solid #e5e5e5; margin-left:10px; padding-left:10px;}
</style>
<script language="javascript">
function scrollSZ(con_id,speed,direct){
 var con,items,heightHalf,heightAll;
 var timer;
 speed = parseInt(speed);//获取设置的速度参数
 con = document.getElementById(con_id);
 con.style.overflow = "hidden";
 if(direct == "top"){
  direct = "top";
 }else if(direct == "bottom"){
  direct = "bottom";
 }else{
  direct = "top";
 } con.innerHTML +=con.innerHTML;
 con.innerHTML +=con.innerHTML;
 items = getChildNodes(con);
 if(items.length < 1){
  return;
 }
 heightAll = 0;
 for(var i=0;i<items.length;i++){
  var numTop,numBottom;
  if (!!window.ActiveXObject){
   numTop = items[i].currentStyle["marginTop"];
   numBottom = items[i].currentStyle["marginBottom"];
  }else{
   numTop = document.defaultView.getComputedStyle(items[i],null)["marginTop"];
   numBottom = document.defaultView.getComputedStyle(items[i],null)["marginBottom"];
  }
  numTop = parseInt(numTop);
  numBottom = parseInt(numBottom);
  numTop += numBottom;
  if(numTop >0){
   heightAll += numTop;
  }
  heightAll += items[i].offsetHeight;
 }
 heightHalf = heightAll/2;
 if(direct == "bottom"){
  con.scrollTop = heightHalf;
  timer = setInterval(_scrollBottom,speed); 
 }else if(direct == "top"){
  timer = setInterval(_scrollTop,speed);
 }
 con.onmouseover = function(){
  if(timer){
   clearInterval(timer);
   timer = null;
  }
 };
 con.onmouseout = function(){
  if(!timer){
   if(direct == "top"){
    timer = setInterval(_scrollTop,speed);
   }else if(direct == "bottom"){
    timer = setInterval(_scrollBottom,speed);
   }
  }
 };
 function _scrollTop(){
  if(con.scrollTop < heightHalf){
   con.scrollTop += 2;
  }else{
   con.scrollTop = 0;
  }
 }
 function _scrollBottom(){
  if(con.scrollTop > 0){
   con.scrollTop -= 2;
  }else{
   con.scrollTop = heightHalf;
  }
 }
}
function scrollSP(con_id,speed,direct){
 var con,innerCon,timer,items,widthAll,widthHalf;
 speed = parseInt(speed);
 con = document.getElementById(con_id);
 con.style.overflow = "hidden";
 items = getChildNodes(con);
 if(items.length == 1){
  innerCon = items[0];
 }else{
  return;
 }
 innerCon.innerHTML += innerCon.innerHTML;
 innerCon.innerHTML += innerCon.innerHTML;
 items = getChildNodes(innerCon);
 if(items.length<1){
  return;
 }
 widthAll = 0;
 for(var i=0;i<items.length;i++){
 }
 for(var i=0;i<items.length;i++){
  var numLeft,numRight;
  if (!!window.ActiveXObject){
   items[i].style.styleFloat = "left";
   numLeft = items[i].currentStyle["marginLeft"];
   numRight = items[i].currentStyle["marginRight"];
  }else{
   items[i].style.cssFloat = "left";
   numLeft = document.defaultView.getComputedStyle(items[i],null)["marginLeft"];
   numRight = document.defaultView.getComputedStyle(items[i],null)["marginRight"];
  }
  numLeft = parseInt(numLeft);
  numRight = parseInt(numRight);
  numLeft += numRight;
  if(numLeft>0){
   widthAll += numLeft;
  }
  widthAll += items[i].offsetWidth;
 }
 widthHalf = widthAll/2;
 innerCon.style.width = widthAll+"px";
 if(direct == "left"){
  direct = "left";
 }else if(direct == "right"){
  direct = "right";
 }else{
  direct = "left"
 }
 if(direct == "left"){
  timer = setInterval(_scrollLeft,speed);
 }else if(direct == "right"){
  con.scrollLeft = widthHalf;
  timer = setInterval(_scrollRight,speed);
 }
 con.onmouseover = function(){
  if(timer){
   clearInterval(timer);
   timer = null;
  }
 }
 con.onmouseout = function(){
  if(direct == "left"){
   timer = setInterval(_scrollLeft,speed);
  }else{
   timer = setInterval(_scrollRight,speed);
  }
 }
 function _scrollLeft(){
  if(con.scrollLeft<widthHalf){
   con.scrollLeft += 2;
  }else{
   con.scrollLeft = 0;
  }
 }
 function _scrollRight(){
  if(con.scrollLeft>0){
   con.scrollLeft -= 2;
  }else{
   con.scrollLeft = widthHalf;
  }
 }
}
function getChildNodes(obj){//获取元素子节点
 var childList,list;
 childList = new Array();
 list = obj.childNodes;
 for(var i=0;i<list.length;i++){
  if(list[i].nodeType == 1)
  childList[childList.length] = list[i];
 }
 return childList;
}
</script>
</head>
<body>


<div id="left_1" class="left_1">
 <div class="left_1_i">
  <p>1</p>
     <p>2</p>
     <p>3</p>
     <p>4</p>
     <div>b</div>
     <div>a</div>
 </div>
</div>
<script language="javascript">scrollSP("left_1",10,"right");</script>
</body>
</html>
 
Javascript 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
js二级地域选择的实现方法
Jun 17 #Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 #Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 #Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 #Javascript
js特效,页面下雪的小例子
Jun 17 #Javascript
js弹出窗口之弹出层的小例子
Jun 17 #Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 #Javascript
You might like
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python读大数据txt
2016/03/28 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
python变量命名的7条建议
2019/07/04 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
python 实现有道翻译功能
2021/02/26 Python
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
学前教育毕业生自荐信范文
2013/12/24 职场文书
感恩的演讲稿
2014/05/06 职场文书
党员承诺书怎么写
2014/05/20 职场文书
教师个人教学反思
2016/02/23 职场文书