左右按钮控制图片自动滚动代码（左右滑动代码）

admin 发布：2022-12-19 22:03 112

本篇文章给大家谈谈左右按钮控制图片自动滚动代码，以及左右滑动代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、通过按钮控制图片左右滚动
2、Dreamweaver制作图片左右滚动的完整代码怎么编写?
3、html 图片左右自动滚动js实现效果
4、网页中的滚动图片的代码怎么写？
5、让图片从右到左滚动的网页代码是怎么样的？
6、图片不间断循环滚动代码（向左，向右，向上，向下）

通过按钮控制图片左右滚动

给你他的代码直接另存为htm文件即可看到效果

主页中画一个框然后粘贴上下面的代码就可以了

注意里面的图片文件路径没改要根据需要自己设置祝你成功

html

head

title无标题文档/title

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

link rel="stylesheet" href="../../include/main.css" type="text/css"

script language="JavaScript" src="../../include/main.js"/script

script language="JavaScript"

function verifyCompatibleBrowser(){

this.ver=navigator.appVersion

this.dom=document.getElementById?1:0

this.ie5=(this.ver.indexOf("MSIE 5")-1 this.dom)?1:0;

this.ie4=(document.all !this.dom)?1:0;

this.ns5=(this.dom parseInt(this.ver) = 5) ?1:0;

this.ns4=(document.layers !this.dom)?1:0;

this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)

return this

}

bw=new verifyCompatibleBrowser()

var speed=50

var loop, timer

function ConstructObject(obj,nest){

nest=(!nest) ? '':'document.'+nest+'.'

this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;

this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;

this.scrollWidth=bw.ns4?this.css.document.width:this.el.offsetWidth

this.clipWidth=bw.ns4?this.css.clip.width:this.el.offsetWidth

this.up=MoveAreaUp;this.down=MoveAreaDown;

this.MoveArea=MoveArea; this.x; this.y;

this.obj = obj + "Object"

eval(this.obj + "=this")

return this

}

function MoveArea(x,y){

this.x=x;this.y=y

this.css.left=this.x

this.css.top=this.y

}

function MoveAreaDown(move){

if(this.x-this.scrollWidth+objContainer.clipWidth){

this.MoveArea(this.x-move,0)

if(loop) setTimeout(this.obj+".down("+move+")",speed)

}

function MoveAreaUp(move){

if(this.x0){

this.MoveArea(this.x-move,0)

if(loop) setTimeout(this.obj+".up("+move+")",speed)

}

function PerformScroll(speed){

if(initialised){

loop=true;

if(speed0) objScroller.down(speed)

else objScroller.up(speed)

}

function CeaseScroll(){

loop=false

if(timer) clearTimeout(timer)

}

var initialised;

function InitialiseScrollableArea(){

objContainer=new ConstructObject('divContainer')

objScroller=new ConstructObject('divContent','divContainer')

objScroller.MoveArea(0,0)

objContainer.css.visibility='visible'

initialised=true;

}

function getpic(theurl){

var dir="../../img/brand/esprit/bed/"

theImg.src=dir+theurl

}

/script

style type="text/css"

#divContainer{position:absolute; width:598px; height:135px; overflow:hidden; top:0px; left:147px; clip:rect(0,738,200,0); visibility:hidden}

#divContent{position:absolute; top:0px; left:124px}

/style

/head

body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="InitialiseScrollableArea()"

noscriptiframe src=*.html/iframe/noscript

script language=javascript

!--

if (window.Event)

document.captureEvents(Event.MOUSEUP);

function nocontextmenu(){

event.cancelBubble = true

event.returnValue = false;

return false;

}

function norightclick(e){

if (window.Event){

if (e.which == 2 || e.which == 3)

return false;

}

else

if (event.button == 2 || event.button == 3){

event.cancelBubble = true

event.returnValue = false;

return false;

}

document.oncontextmenu = nocontextmenu; // for IE5+

document.onmousedown = norightclick; // for all others

//--

/scripttable width="758" border="0" cellspacing="0" cellpadding="0"

tr

td height="135" bgcolor="#FFFFFF" valign="middle" align="center"

table width="758" height="135" border="0" cellpadding="0" cellspacing="0"

tr

td width="8" align="center" valign="middle" bgcolor="#666666"a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()" onMousedown="PerformScroll(-14)" onMouseup="CeaseScroll()"img src="../../img/arrow-left.gif" width="6" height="12" border="0"/a/td

td width=2 align="left" valign="middle"/td

td width=135 align="left" valign="middle"a href=# onClick="getpic('YY1SAFARI.jpg');return false"img src="../../img/brand/esprit/title.jpg" width="135" height="135" border=0/a/td

td align="left" valign="top" width="601" height="135"

div id="Layer1" style="position:absolute; width:143px; height:135px; z-index:1; top: 0px; left: 0px;"

div id="divContainer" style="visibility: visible"

div id="divContent"

table width="4250" border="0" cellspacing="0" cellpadding="0"

tr align="left"

td width=160 valign="middle"a href=# onClick="getpic('JC1A.jpg');return false"img src="../../img/brand/esprit/bed/JC1As.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('JC1B.jpg');return false"img src="../../img/brand/esprit/bed/JC1BS.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('JC1C.jpg');return false"img src="../../img/brand/esprit/bed/JC1CS.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('YY3.jpg');return false"img src="../../img/brand/esprit/bed/YY3S.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('YY4.jpg');return false"img src="../../img/brand/esprit/bed/YY4S.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('YY5.jpg');return false"img src="../../img/brand/esprit/bed/YY5S.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('YY1SAFARI.jpg');return false"img src="../../img/brand/esprit/bed/YY1SAFARIS.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('YY2FERN.jpg');return false"img src="../../img/brand/esprit/bed/YY2FERNS.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yt1.jpg');return false"img src="../../img/brand/esprit/bed/yt1s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yt-2.jpg');return false"img src="../../img/brand/esprit/bed/yt-2s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yt3.jpg');return false"img src="../../img/brand/esprit/bed/yt3s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yt4.jpg');return false"img src="../../img/brand/esprit/bed/yt4s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yt6.jpg');return false"img src="../../img/brand/esprit/bed/yt6s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yt7.jpg');return false"img src="../../img/brand/esprit/bed/yt7s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yt8.jpg');return false"img src="../../img/brand/esprit/bed/yt8s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yt9.jpg');return false"img src="../../img/brand/esprit/bed/yt9s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yt10.jpg');return false"img src="../../img/brand/esprit/bed/yt10s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yt11.jpg');return false"img src="../../img/brand/esprit/bed/yt11s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('ys1.jpg');return false"img src="../../img/brand/esprit/bed/ys1s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('ys2.jpg');return false"img src="../../img/brand/esprit/bed/ys2s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('ys4.jpg');return false"img src="../../img/brand/esprit/bed/ys4s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('ys5.jpg');return false"img src="../../img/brand/esprit/bed/ys5s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('ys6.jpg');return false"img src="../../img/brand/esprit/bed/ys6s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('ys7.jpg');return false"img src="../../img/brand/esprit/bed/ys7s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('ys10.jpg');return false"img src="../../img/brand/esprit/bed/ys10s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('ys11.jpg');return false"img src="../../img/brand/esprit/bed/ys11s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('ys14.jpg');return false"img src="../../img/brand/esprit/bed/ys14s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yp4.jpg');return false"img src="../../img/brand/esprit/bed/yp4s.jpg" width="143" height="135" border=0/a/td

td width=160 valign="middle"a href=# onClick="getpic('yp8.jpg');return false"img src="../../img/brand/esprit/bed/yp8s.jpg" width="143" height="135" border=0/a/td

/tr

/table

/div

/td

td width="1" bgcolor="#FFFFFF" /td

td width="11" align="center" valign="middle" bgcolor="#666666"a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()" onMousedown="PerformScroll(14)" onMouseup="CeaseScroll()"img src="../../img/arrow-right.gif" width="6" height="12" border="0"/a/td

/tr

/table

/td

/tr

tr

/tr

tr

td

table width="100%" border="0" cellspacing="0" cellpadding="0"

tr

td bgcolor="E8E7E0" width="1" height="1"img src="../../img/empty.gif" width="1" height="1"/td

td bgcolor="E8E7E0" height="1"img src="../../img/empty.gif" width="1" height="1"/td

td bgcolor="E8E7E0" width="1" height="1"img src="../../img/empty.gif" width="1" height="1"/td

/tr

tr

td align="center" valign="middle"img src="../../img/brand/esprit/bed/JC1A.jpg" width="704" height="377" name="theImg" id="theImg"/td

/tr

/table

/td

/tr

/table

/body

/html

Dreamweaver制作图片左右滚动的完整代码怎么编写?

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

style type="text/css"

!--

#aa {

height: 150px;

position: relative;

border: 1px solid #000000;

width: 585px;

overflow: hidden;

margin: 0px;

padding: 0px;

}

#aatable {

padding-top: 0px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 0px;

position: absolute;

left: 0px;

top: 0px;

}

--

/style

script type="text/javascript"

function copyaa()

{

var onetab=document.getElementById("a").getElementsByTagName("table")[0];

var twotab=onetab.cloneNode(true);

document.getElementById("b").appendChild(twotab);

mmm();

}

function mmm()

{

var obj=document.getElementById("aatable");

var left=obj.style.left;

left=eval(left.replace("px",""));

left-=5;

if(left=-956)

{

left=0;

}

obj.style.left=left+"px";

setTimeout("mmm()",50);

}

/script

/head

body onload="copyaa()"

div id="aa"

table border="0" cellspacing="0" cellpadding="0" id="aatable" style="left:0"

tr

td id="a"

table border="0" cellspacing="0" cellpadding="0"

tr

tdimg src="images/3.jpg" //td

tdimg src="images/5.jpg" //td

tdimg src="images/6.jpg" //td

tdimg src="images/8.jpg" //td

/tr

/table

/td

td id="b"/td

/tr

/table

/div

/body

/html

td里面的图片你自己找图片放进去就行了，欢迎采纳，

左右按钮控制图片自动滚动代码（左右滑动代码）

html 图片左右自动滚动js实现效果

类似这个效果的网上很多的啦，弄个改改就行了。

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

titleJS平滑图片滚动/title

SCRIPT language=JavaScript type=text/JavaScript

var sh;

var marquees;

marqueesWidth=610;

var speed=20,preLeft=0,stopscroll=false,flag=true;

function scrollLeft(){

preLeft=marquees.scrollLeft;

marquees.scrollLeft+=3;

if(preLeft=marquees.scrollLeft){

Right();

}

function scrollRight(){

preLeft=marquees.scrollLeft;

marquees.scrollLeft-=3;

if(preLeft=marquees.scrollLeft){

Left();

}

function Left(){

flag=true;

clearInterval( sh );

sh = setInterval("scrollLeft()",speed);

}

function Right(){

flag=false;

clearInterval( sh );

sh = setInterval("scrollRight()",speed);

}

function normal(){

clearInterval( sh );

speed=20;

if(flag)Left();

else Right();

}

function plusSpeed(){

clearInterval( sh );

speed=10;

if(flag)Left();

else Right();

}

function init(){

marquees=document.getElementById("marquees1");

with(marquees){

style.width=marqueesWidth+"px";

style.overflowX="hidden";

style.overflowY="visible";

}

Left();

}

/SCRIPT

/head

body onload="init()"

TABLE cellSpacing=1 width=660 align=center border=0

TR bgColor=#f8f8f8

TD align=middle width=25img

src="" border=0 onmouseout=normal() onmouseover=plusSpeed() style="CURSOR: pointer" //TD

TD

DIV id="marquees1"

TABLE border=0TR

TD align=middle width=85table cellSpacing=0 cellPadding=0 align=center border=0trtdimg class=imgframe src='' border=0 //td

/trtrtddiv align="center"第1期/div/td