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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
koa2实现登录注册功能的示例代码
Dec 03 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
yii分页组件用法实例分析
2015/12/28 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
详解JS函数重载
2014/12/04 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
python 字符串split的用法分享
2013/03/23 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python构建图像分类识别器的方法
2019/01/12 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Python爬取梨视频的示例
2021/01/29 Python
解释一下钝化(Swap out)
2016/12/26 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
村委会主任先进事迹
2014/01/15 职场文书
个人现实表现材料
2014/02/04 职场文书
社区禁毒工作方案
2014/06/02 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
大学生作弊检讨书
2014/09/11 职场文书
银行授权委托书样本
2014/10/13 职场文书
2014年财政工作总结
2014/12/10 职场文书
旷工检讨书1000字
2015/01/01 职场文书
保研推荐信范文
2015/03/25 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
如何正确理解python装饰器
2021/06/15 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
Python进行区间取值案例讲解
2021/08/02 Python