• 控制图片水平方向左右滚动的JS代码


    代码简介:

    一款JS图片滚动效果,默认是不滚动,鼠标放到左侧的三角符号上,它才会滚动,效果不错,运行时请耐心一点等待图片加载完成,然后刷新一下页面就正常了。

    代码内容:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>控制图片水平方向左右滚动的JS代码 - www.webdm.cn</title>
    <SCRIPT language=JavaScript type=text/JavaScript>
    <!--
    var sh;
    marqueesWidth=610;
    preLeft=0; currentLeft=0; stopscroll=false; getlimit=0;preTop=0; currentTop=0;
    
    function scrollLeft()
    {
    	if(stopscroll==true) return;
    	preLeft=marquees.scrollLeft;
    	marquees.scrollLeft+=2;
    	if(preLeft==marquees.scrollLeft)
    	{
    	//marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
    	}
    }
    
    function scrollRight()
    {
    	if(stopscroll==true) return;
    	preLeft=marquees.scrollLeft;
    	marquees.scrollLeft-=2;
    	if(preLeft==marquees.scrollLeft)
    	{
    		if(!getlimit)
    		{
    			marquees.scrollLeft=templayer.offsetWidth*2;
    			getlimit=marquees.scrollLeft;
    		}
    		marquees.scrollLeft-=1;
    	}
    }
    
    function Left()
    {
    	stopscroll = false;
    	sh = setInterval("scrollLeft()",20);
    }
    function Right()
    {
    	stopscroll = false;
    	sh = setInterval("scrollRight()",20);
    }
    
    function StopScroll()
    {
    	stopscroll = true;
    	clearInterval( sh );
    }
    
    function SelectType(value)
    {
    	document.all.sendForm.page.value = 1;
    	document.all.sendForm.type.value = value;
    	document.all.sendForm.submit();
    }
    function init()
    {
    	with(marquees)
    	{
    		style.height=0;
    		style.width=marqueesWidth;
    		style.overflowX="hidden";
    		style.overflowY="visible";
    		style.align = "center";
    		noWrap=true;
    	}
    }
    
    //-->
    </SCRIPT>
    </head>
    <!--body区域内代码-->
    <body onload="init()">
    <TABLE cellSpacing=1 width=660 align=center border=0>
    <TR bgColor=#f8f8f8>
    <TD align=middle width=25><img 
          src="http://www.webdm.cn/images/20091005/left.gif" border=0 onmouseout=StopScroll() onmouseover=Left() 
    
    style="CURSOR: pointer" /></TD>
        <TD>
          <DIV id=marquees>
          <TABLE border=0><TR>
    
    <TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe 
    
    src='http://www.webdm.cn/images/wall7_s.jpg' border=0 /></td>
    </tr><tr><td><div align="center">第1期</div></td>
    </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img 
    class=imgframe src='http://www.webdm.cn/images/wall1_s.jpg' border=0 /></td>
    </tr><tr><td><div align="center">第2期</div></td>
    </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img 
    class=imgframe src='http://www.webdm.cn/images/wall2_s.jpg' border=0 /></td>
    </tr><tr><td><div align="center">第1期 </div></td>
    </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img 
    class=imgframe src='http://www.webdm.cn/images/wall3_s.jpg' border=0 /></td>
    </tr><tr><td><div align="center">第1期</div></td>
    </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img 
    class=imgframe src='http://www.webdm.cn/images/wall4_s.jpg' border=0 /></td>
    </tr><tr><td><div align="center">第2期</div></td>
    </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img 
    class=imgframe src='http://www.webdm.cn/images/wall5_s.jpg' border=0 /></td>
    </tr><tr><td><div align="center">第3期</div></td>
    </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img 
    class=imgframe src='http://www.webdm.cn/images/wall6_s.jpg' border=0 /></td>
    </tr><tr><td><div align="center">第4期</div></td>
    </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img 
    class=imgframe src='http://www.webdm.cn/images/wall7_s.jpg' border=0 /></td>
    </tr><tr><td><div align="center">第5期</div></td>
    </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img 
    class=imgframe src='http://www.webdm.cn/images/wall8_s.jpg' border=0 /></td>
    </tr><tr><td><div align="center">第6期</div></td>
    </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img 
    class=imgframe src='http://www.webdm.cn/images/wall9_s.jpg' border=0 /></td>
    </tr><tr><td><div align="center">第7期</div></td>
    </tr></table></TD>
    </TR></TABLE></DIV>
    <DIV id=templayer style="LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px"></DIV></TD>
    <TD align=middle width=25><img 
          src="http://www.webdm.cn/images/20091005/right.gif" border=0 onmouseout=StopScroll() onmouseover=Right() 
    
    /></TD>
    </TR></TABLE>
    <div align="center"><br><br>如果没有看到效果,请等待图片下载完成,并刷新页面。鼠标先放到左边,然后在放右边。</div>
    </body>
    </html>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    

    代码来自http://www.webdm.cn/webcode/6a432bee-331a-474f-b541-d8f74c8d2dab.html

  • 相关阅读:
    iphone界面详解
    Spring jdbcTemplate.queryForInt(sql)的奇怪问题,呵呵
    BCP 高效批量导入
    eclipse中javascript显示为乱码的解决办法
    spring jdbcTemplate返回RS
    Spring IOC DI 形象理解
    MOSS 2007 文档库事件处理
    showModalDialog和showModelessDialog使用心得
    XMLHTTP.open权限不够的解决
    体现JAVA中的面向对象思想,接口(抽象类)的用处 :饲养员给动物喂食物
  • 原文地址:https://www.cnblogs.com/webdm/p/2289836.html
Copyright © 2020-2023  润新知