zoukankan      html  css  js  c++  java
  • 控制图片水平方向左右滚动的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

  • 相关阅读:
    Sum Root to Leaf Numbers
    Sum Root to Leaf Numbers
    Sort Colors
    Partition List
    Binary Tree Inorder Traversal
    Binary Tree Postorder Traversal
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Search a 2D Matrix
    leetcode221
  • 原文地址:https://www.cnblogs.com/webdm/p/2289836.html
Copyright © 2011-2022 走看看