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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
python搜索指定目录的方法
2015/04/29 Python
浅谈Python中的模块
2020/06/10 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
建筑实习自我鉴定
2013/10/18 职场文书
保险专业大专生求职信
2013/10/26 职场文书
毕业生自荐书
2014/02/03 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
教师工作表现自我评价
2015/03/05 职场文书
信息技术国培研修日志
2015/11/13 职场文书
java中如何截取字符串最后一位
2022/07/07 Java/Android