龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

javascript中图片无缝滚动代码

时间:2012-12-29 08:41来源:未知 作者:admin 点击: 次
分享到：
下面总结了两种关于图片无缝滚动实现代码，有需要的朋友可参考参考。 下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和 demo2，
下面总结了两种关于图片无缝滚动实现代码，有需要的朋友可参考参考。

下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和 demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

核心代码

 代码如下

<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>

上面显示的是四行，如果只要1行，或者几行  改这里height:68px
只显示1行：<div id="div1" style="width:300px;height:15px;overflow:hidden">
图片滚动

 代码如下
<style>img{display:block}</style>
<div id="div1" style="width:221px;height:187px;overflow:hidden">
<img src=/blog/images/logo.gif>
<img src=/so/images/logo.gif>
<img src=/web/image/logo2.gif>
<img src=/get_pic/2012/11/30/20121130031924684.gif>
</div>
<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>

再看个实例

 

 代码如下
程序代码
    <style type="text/css">
    <!--
    #demo {
     background: #FFF;
     overflow:hidden;
     border: 1px dashed #CCC;
     width: 500px;
    }
    #demo img {
     border: 3px solid #F2F2F2;
    }
    #indemo {
     float: left;
     width: 800%;
    }
    #demo1 {
     float: left;
    }
    #demo2 {
     float: left;
    }
    -->
    </style>
    向右滚动
    <div id="demo">
    <div id="indemo">
    <div id="demo1">
    <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>
    </div>
    <div id="demo2"></div>
    </div>
    </div>
    <script>
    <!--
    var speed=10; //数字越大速度越慢
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
    if(tab.scrollLeft<=0)
    tab.scrollLeft+=tab2.offsetWidth
    else{
    tab.scrollLeft--
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
    -->
    </script>

一个中级的上、下、左、右滚动代码，Js无缝滚动代码，可以控制滚动速度、滚动方向，而且考虑到了obj.style.attr只能获取到行内样式，因而还增加了JS判断获取确切的外补丁，以消除非行内样式的外补丁对无缝衔接的影响。JS通过四次循环内部元素的方式来保持滚动，所以只要原始内容尺寸超过容器对应尺寸的1/4就能滚动，降低了之前两次循环元素时的滚动门槛。
　　第一个参数 con_id 是用于JS找到元素的，是滚动元素的id。
　　第二个参数 speed_num 是用来设置滚动速度的，数值越大，滚动速度越慢；单位默认是毫秒，不用写，只要写个正整数即可。
　　第三个参数 direct 是用来控制滚动方向的，top/bottom/left/right,如果不是这四个值，则水平滚动默认向左，竖直滚动默认向上。注意几点：
　　1、水平滚动的容器id给出的容器能且仅能有一个直接子节点！
　　2、使用方式是在页面头部引入此文件，在需要滚动的容器的闭合标签后调用对应的滚动方法scrollSP(con_id,speed,direct)、scrollSZ(con_id,speed,direct)。

 

 代码如下

<!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;}
.top_1{ height:100px; width:200px; border:1px solid #333333; margin:0 auto;}
.top_1 p{ height:30px; line-height:30px; margin-top:10px;}
.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="top_1" class="top_1">
 <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <div>b</div>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <div>a</div>
</div>
<script language="javascript">scrollSZ("top_1",10,"bottom");</script>
<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>

精彩图集
node+express+ejs制作简单页面上手指南_node.js
node+express+
js点亮星星评分并获取参数的js代码
js点亮星星评
鼠标滑过出现预览的大图提示效果
鼠标滑过出
查找Oracle高消耗语句的方法
查找Oracle高
PHP开发者必须掌握的6个关键字
PHP开发者必

热门标签

菜单类 GPS定位 double保留 5天 win7_dns服务器 簇 gif 下标重载 禁用右键 免杀 安全隐患 Driver Memcache php php查询mys 类反射 日期校验 全栈式开 拉钩 缺勤 容器隐藏 分表 网站首页 tag标签 项目开发 jsp定义方法 php php实现的 存储类型 SQLHELPER 时长 电子邮箱 手机内存 生成树 多范式 自增字段 dbi python文件比较 简单计算器 help 判断MAC地址 AsyncTask 点击 数字查找 IIS的备份 encrypt.vbs eval 再次点击 An 布局 备份表 rpm安装包 数 端口例外 解析 访问的 指令 php php直接在 收缩 无法还原 json_decode 自定义异常

赞助商链接