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

  • 相关阅读:
    npm 5.4.2 更新后就不能用了
    Node.js 被分叉出一个项目 — Ayo.js,肿么了
    页面缓存之Meta http-equiv属性详解
    Javascript 浮点计算问题分析与解决
    详解 Cookie 纪要(vue.cookie,jquery.cookie简化)
    Cookie 基本操作
    HTML5上传图片预览
    location.href跳转测试
    ios中iframe的scroll滚动事件替代方法
    JS数组API
  • 原文地址:https://www.cnblogs.com/webdm/p/2289836.html
Copyright © 2011-2022 走看看