• JQuery控制图片无缝滚动


    经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html></html>这样子的,没有加上documentType标签,不符合“标准”。

    于是自己套上了标准之后再改了一下,发现在firefox中还是滚动不起来,知道肯定是某些地方的js只适用于IE吧,也懒得慢慢找了,直接用jquery来制作。

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

     

    <!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=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;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><href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>
                
    <td><href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
                
    <td><href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
                
    <td><href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
                
    <td><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" "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=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><href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>            
              
    </tr>
              
    <tr align="center">
                  
    <td><href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
              
    </tr>
              
    <tr align="center">
                  
    <td><href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
              
    </tr>
              
    <tr align="center">
                  
    <td><href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
              
    </tr>
              
    <tr align="center">
                  
    <td><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);
        }
    }

    源码下载:/Files/niunan/scrollpic.rar

    撸码:复制、粘贴,拿起键盘就是“干”!!!
  • 相关阅读:
    bzoj2431[HAOI2009]逆序对数列
    wikioi1082【线段树练习 3 】
    bzoj1715[Usaco2006 Dec]Wormholes 虫洞
    bzoj1676[Usaco2005 Feb]Feed Accounting 饲料计算
    bzoj1677[Usaco2005 Jan]Sumsets 求和
    bzoj1679[Usaco2005 Jan]Moo Volume 牛的呼声
    bzoj1680[Usaco2005 Mar]Yogurt factory
    bzoj1681[Usaco2005 Mar]Checking an Alibi 不在场的证明
    bzoj2705[SDOI2012]Longge的问题
    bzoj1627[Usaco2007 Dec]穿越泥地
  • 原文地址:https://www.cnblogs.com/niunan/p/1453777.html
Copyright © 2020-2023  润新知