箭头控制横向滚动图片

原创 2016年06月02日 12:49:51
 把如下代码复制到<head></head>之间
 
 

<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>

 
 
 
 
修改<body>标签为
 
<body onload="init()">
 
 
 
 
 
把如下代码复制到<body></body>之间
 

<TABLE cellSpacing=1 width=660 align=center border=0>
<TR bgColor=#f8f8f8>
<TD align=middle width=25><IMG
      src="images/
/pointer-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='images/1.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='images/2.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='images/3.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='images/4.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='images/5.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='images/6.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='images/7.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='images/8.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='images/9.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='images/10.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="images/
pointer-right.gif" border=0 onmouseout=StopScroll() onmouseover=Right() style="CURSOR: pointer"></TD>
</TR></TABLE>

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

基于jQuery的图片展示(横向滚动,可左右控制)

今天在网上看了一个图片展示的实例,就整理一下贴了出来,为的是以后使用方便,也可以和大家一起分享。 下面是整个页面,如果要使用,只需把整个页面拷贝过去,然后修改图片路径,把jQuery的包也要放进去。...

带箭头横向滚动

  • 2015-01-31 11:32
  • 36KB
  • 下载

基于jQuery的图片展示(横向滚动,可左右控制)

今天在网上看了一个图片展示的实例,就整理一下贴了出来,为的是以后使用方便,也可以和大家一起分享。 下面是整个页面,如果要使用,只需把整个页面拷贝过去,然后修改图片路径,把jQuery的包也要放进去。...

图片横向滚动!!JS-鼠标可控制~~~

图片横向平滑滚动JS代码

  • 2013-08-05 16:13
  • 102KB
  • 下载

jQuery横向图片滚动焦点图实现


内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)