无缝滚动,图片从右往左无闲暇滚动代码

来源:http://www.smjxgs.com 作者:4887王中王鉄算盘奖结果 人气:135 发布时间:2019-08-16
摘要:无缝滚动 jQuery经典代码 (收藏),无缝jquery script language="javascript"src="; style type="text/css"     img     {         border: none;     }/style div id="demo"         table border="0" align="center

无缝滚动 jQuery经典代码 (收藏),无缝jquery

<script language="javascript" src=";

<style type="text/css">     img     {         border: none;     } </style>

<div id="demo" >        

   <table border="0" align="center" cellpadding="1" cellspacing="1" cellspace="0">       

      <tr>             

      <td id="demo1" valign="top" bgcolor="ffffff">               

     <!-- 特别注意,下面的图片总宽度必须大于上面定义的demo的宽度,如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题! -->                  

   <table border="0" cellspacing="0" cellpadding="0">                 

        <tr align="center">                        

       <td>                               

      <a href="#" target="_blank"> <img src="img/1.jpg" width="150" alt="第一张图" height="100"></a>                   

          </td>                       

        <td>                       

            <a href="#" target="_blank"><img src="img/2.jpg" width="150" alt="第二张图" height="100"></a>                   

          </td>        

    <td>                            

        <a href="#" target="_blank"><img src="img/3.jpg" width="150" alt="第三张图" height="100"></a>                

          </td>                                            

          <td>                             

        <a href="#" target="_blank"><img src="img/4.jpg" width="150" alt="第四张图" height="100"></a>              

          </td>                        

        <td>                            

       <a href="#" target="_blank"><img src="img/5.jpg" width="150" alt="第五张图" height="100"></a>                   

       </td>                     

      </tr>                  

   </table>             

    </td>              

   <td id="demo2" valign="top"></td>      

   </tr>     

    </table>    

</div>

 <script type="text/javascript">      var speed=30;     var demo = $("#demo");     var demo1 = $("#demo1");     var demo2 = $("#demo2");    

     demo2.html(demo1.html());    

     function Marquee(){          if(demo.scrollLeft()>=demo1.width())             demo.scrollLeft(0);          else{             demo.scrollLeft(demo.scrollLeft() 1);         }     } 

        var MyMar=setInterval(Marquee,speed)   

        demo.mouseover(function() {         clearInterval(MyMar);     } )     demo.mouseout(function() {         MyMar=setInterval(Marquee,speed);     } )   

  </script>

<div class="rollBox" id="demo" style="overflow:hidden; height:77px; width:700px; color:#ffffff; ">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td id="demo1">
<table border="0" align="center" cellpadding="6px" cellspacing="0">
<tr>
<td align="center">
 <a href="show.aspx?id=67&cid=21" target="_blank"><img src="image/old1.jpg" alt="" width="150" height="80" /></a>
 </td>
 <td> <a href="show.aspx?id=68&cid=21" target="_blank"><img src="image/old2.jpg" alt="" width="150" height="80" /></a></td>
  <td> <a href="show.aspx?id=69&cid=21" target="_blank"><img src="image/old3.jpg" alt="" width="150" height="80" /></a></td>
   <td> <a href="show.aspx?id=70&cid=21" target="_blank"><img src="image/old4.jpg" alt="" width="150" height="80" /></a></td>
    <td> <a href="show.aspx?id=71&cid=21" target="_blank"><img src="image/old5.jpg" alt="" width="150" height="80" /></a></td>
</tr>
</table>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
 
<SCRIPT language="javascript" defer>
function GetObj(objName)
{
 if(document.getElementById)
 {
  return eval('document.getElementById("' objName '")');
 }
 else
 {
  return eval('document.all.' objName);
 }
}
 
var rollSpeed = 15;//速度数值越大速度越慢
var rollStep  = 1; //滚动步长
var rollLeft  = true; //往左滚动
 
GetObj("demo2").innerHTML=GetObj("demo1").innerHTML;
 
function Marquee()
{
    if(rollLeft)
 {
  if(GetObj("demo").scrollLeft>=GetObj("demo1").offsetWidth)
  {
   GetObj("demo").scrollLeft-=GetObj("demo1").offsetWidth;
  }
  else
  {
   GetObj("demo").scrollLeft =rollStep;
  }
 }
 else
 {
  if(GetObj("demo").scrollLeft<=0)
  {
   GetObj("demo").scrollLeft =GetObj("demo1").offsetWidth;
  }
  else
  {
   GetObj("demo").scrollLeft-=rollStep;
  }
 }
}
 
function MarqueeLeft_ON()
{
    rollLeft = true;
 rollStep = 20;
}
 
function MarqueeLeft_OFF()
{
    rollStep = 1;
}
 
function MarqueeRight_ON()
{
    rollLeft = false;
 rollStep = 20;
}
 
function MarqueeRight_OFF()
{
    rollStep = 1;
}
 
var MyMar=setInterval(Marquee,rollSpeed);
GetObj("demo").onmouseover=function() {clearInterval(MyMar);}
GetObj("demo").onmouseout=function() {MyMar=setInterval(Marquee,rollSpeed);}
</SCRIPT>

图片无缝向左滚动的代码如下:

这个无缝滚动代码,如果一个页面调用多次,需要改什地方呀

function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on' evt,fn);
}
}
addEventSimple(window,'load',initScrolling);
这些代码是初始化,实际执行的是initScrolling函数.
而initScrolling函数是对scrollText节点操作的:
function initScrolling(){
scrollingBox = document.getElementById("scrollText");

//样式设置,与滚动基本无关,应该用CSS设置。
scrollingBox.style.height = "250px";
scrollingBox.style.overflow = "hidden";

//滚动
scrollingInterval = setInterval("scrolling()",40);
//鼠标划过停止滚动效果
scrollingBox.onmouseover = over;
//鼠标划出回复滚动效果
scrollingBox.onmouseout = out;
}
知道了调用关系,怎么改不就随你意了?  

 

Jquery 文字向左无缝滚动-仿新浪微薄未登录首页正在热议滚动 解答

无非是DOMAttrModified和DOMSubtreeModified。
实时调整ul的position的left值,第一个li完全隐藏后移动到ul末尾。  

jQuery经典代码 (收藏),无缝jquery script language="javascript" src=" style type="text...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS图片向左滚动</title>
    <style type="text/css">
    img{
    border: none;
    }
    </style>
    <!-- 这句话不能少,记得把jquery.js文件放在当前页面的同一目录中 -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr>
      <td id="demo1" valign="top" bgcolor="ffffff">
      <!-- 特别注意,下面的图片总宽度必须大于上面定义的demo的宽度,如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题! -->
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>
      <td id="demo2" valign="top"></td>
    </tr>
  </table>
</div>
<script type="text/javascript"> 
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){ 
    if(demo.scrollLeft()>=demo1.width())
        demo.scrollLeft(0); 
    else{
        demo.scrollLeft(demo.scrollLeft() 1);
    }

var MyMar=setInterval(Marquee,speed) 
demo.mouseover(function() {
    clearInterval(MyMar);
} )
demo.mouseout(function() {
    MyMar=setInterval(Marquee,speed);
} )

function fun1(){
    alert(demo.scrollLeft());
}
function fun2(){
    alert(demo1.width());
}
</script>
<input type="button"  value="显示demo.scrollLeft()" onclick="fun1();"/>
<input type="button"  value="显示demo1.width())" onclick="fun2();"/>
</body>
</html>

 

那二个按钮主要是为了自己观察值的变化之用,正式使用中可以去掉。

向右无缝滚动的HTML同上,只是js脚本中的Marquee函数不同,代码如下:

 

function Marquee(){ 
    if(demo.scrollLeft()==0){
        demo.scrollLeft(demo1.width());
    }else{
        demo.scrollLeft(demo.scrollLeft()-1);
    }
}

 

向上无缝滚动的HTML代码如下:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS图片向上滚动</title>
    <style type="text/css">
    img{
    border: none;
    }
    </style>
    <!-- 这句话不能少,记得把jquery.js文件放在当前页面的同一目录中 -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;height:300px;">
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr id="demo1">
      <td valign="top" bgcolor="ffffff">
      <!-- 特别注意,下面的图片总高度必须大于上面定义的demo的宽度,如上面demo的高度为300px,则下面所有图片的高的和值必须大于300,否则会出现些问题! -->
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>            
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr id="demo2">
    </tr>
  </table>
</div>
<script type="text/javascript"> 
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){ 
    if(demo.scrollTop()>=demo1.height())
        demo.scrollTop(0); 
    else{
        demo.scrollTop(demo.scrollTop() 1);
    }

var MyMar=setInterval(Marquee,speed) 
demo.mouseover(function() {
    clearInterval(MyMar);
} )
demo.mouseout(function() {
    MyMar=setInterval(Marquee,speed);
} )

function fun1(){
    alert(demo.scrollTop());
}
function fun2(){
    alert(demo1.height());
}
</script>
<input type="button"  value="显示demo.scrollTop()" onclick="fun1();"/>
<input type="button"  value="显示demo1.height())" onclick="fun2();"/>
</body>
</html>

 

 

向下无缝滚动的HTML代码同上,只是js脚本中的Marquee函数不同,如下:

 

 

function Marquee(){ 
    if(demo.scrollTop()==0)
        demo.scrollTop(demo1.height()); 
    else{
        demo.scrollTop(demo.scrollTop()-1);
    }
}

本文由4887王中王鉄算盘奖结果发布于4887王中王鉄算盘奖结果,转载请注明出处:无缝滚动,图片从右往左无闲暇滚动代码

关键词:

最火资讯