箭头控制横向滚动图片

原创 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的包也要放进去。...
  • fengxuezhiye
  • fengxuezhiye
  • 2012年03月09日 14:34
  • 16306

android屏幕横向滚动,android图片横向滚动

有时在设计时,有些布局总需要动态加载内容、加载布局等。ListView能完成这个功能,但是大家都知道ListView是纵向的,也就是只能上下滑动,想要左右滑动很难做到。我研究了很长的时间,在网上找了很...
  • chixinwuxue
  • chixinwuxue
  • 2014年12月09日 13:34
  • 6977

鼠标滑轮控制Div水平滚动

滑轮控制Div水平滚动
  • Qiustion
  • Qiustion
  • 2017年05月12日 12:15
  • 1129

JavaScript 实现图片横向自动滚动

HTML源码 XuLinJie_
  • w_linux
  • w_linux
  • 2017年04月24日 23:17
  • 2588

ScrollPic.js——图片左右滚动插件(单一功能)

客观的讲,scrollpic.js的确是一个很好用的图文滚动插件,它不但可以左右控制无缝连续滚动,还可以兼容如此多的浏览器,真的是难能可贵。对于没有太多JS专业功底的网页生产者,这个插件用起来也不是很...
  • cddcj
  • cddcj
  • 2016年08月18日 15:05
  • 3946

Gallery实现横向滑动图片

Gallery可以横向显示一组图片,并且可以横向滑动。下面展示如何使用Gallery去显示图片。 其用法用ListView几乎一致。 大致为: 1.在布局文件中加入Gallery控件 activity...
  • linder_qzy
  • linder_qzy
  • 2016年02月25日 11:56
  • 434

带左右箭头切换的自动滚动图片JS特效

  • ouyangzhan
  • ouyangzhan
  • 2010年09月11日 15:50
  • 8080

带有左右箭头的幻灯片展示

带有左右箭头的幻灯片展示 今天主要是通过jquery来实现 带有左右箭头的幻灯片展示,效果如下: 1.html代码如下: 带有左右箭头的轮播图 body{margin: 0;pad...
  • u013630488
  • u013630488
  • 2015年10月28日 13:10
  • 435

css3实现图片横向无缝滚动的效果

之前实现无缝滚动大多结合js,如今有了css3,就简单多了。 下面就一起看看实例吧。 html代码: 1 2 3 4 5 ...
  • yhbsww0523
  • yhbsww0523
  • 2017年12月21日 13:41
  • 250

Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505自从Gallery被谷歌废弃以后,Google推荐使用ViewPag...
  • lmj623565791
  • lmj623565791
  • 2014年07月26日 16:28
  • 188376
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:箭头控制横向滚动图片
举报原因:
原因补充:

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