图片从左向右滚动代码(html图片左右滚动代码点击)
admin 发布:2022-12-19 06:30 168
今天给各位分享图片从左向右滚动代码的知识,其中也会对html图片左右滚动代码点击进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、JS控制图片向左向右移动的代码
- 2、图片不间断循环滚动代码(向左,向右,向上,向下)
- 3、网页制作-图片从左向右滚动代码
- 4、让图片从右到左滚动的网页代码是怎么样的?
- 5、Dreamweaver制作图片左右滚动的完整代码怎么编写?
- 6、网页图片左右循环滚动代码
JS控制图片向左向右移动的代码
这段代码可以: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " html xmlns=" " head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / title图片/title script language="javascript" !-- //图片滚动列表 mengjia 070927 var Speed_1 = 10; //速度(毫秒) var Space_1 = 20; //每次移动(px) var PageWidth_1 = 116 * 3; //翻页宽度 var interval_1 = 7000; //翻页间隔 var fill_1 = 0; //整体移位 var MoveLock_1 = false; var MoveTimeObj_1; var MoveWay_1="right"; var Comp_1 = 0; var AutoPlayObj_1=null; function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} function AutoPlay_1(){clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval('ISL_GoDown_1();ISL_StopDown_1();',interval_1)} function ISL_GoUp_1(){if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="left";MoveTimeObj_1=setInterval('ISL_ScrUp_1();',Speed_1);} function ISL_StopUp_1(){if(MoveWay_1 == "right"){return};clearInterval(MoveTimeObj_1);if((GetObj('ISL_Cont_1').scrollLeft-fill_1)%PageWidth_1!=0){Comp_1=fill_1-(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1);CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrUp_1(){if(GetObj('ISL_Cont_1').scrollLeft=0){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft+GetObj('List1_1').offsetWidth} GetObj('ISL_Cont_1').scrollLeft-=Space_1} function ISL_GoDown_1(){clearInterval(MoveTimeObj_1);if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="right";ISL_ScrDown_1();MoveTimeObj_1=setInterval('ISL_ScrDown_1()',Speed_1)} function ISL_StopDown_1(){if(MoveWay_1 == "left"){return};clearInterval(MoveTimeObj_1);if(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1-(fill_1=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft=GetObj('List1_1').scrollWidth){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth} GetObj('ISL_Cont_1').scrollLeft+=Space_1} function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return} var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)PageWidth_1/2){TempSpace=Math.round(Math.abs(Comp_1/Space_1));if(TempSpace1){TempSpace=1}} if(Comp_10){if(Comp_1-TempSpace){Comp_1+=TempSpace;num=TempSpace}else{num=-Comp_1;Comp_1=0} GetObj('ISL_Cont_1').scrollLeft-=num;setTimeout('CompScr_1()',TempSpeed)}else{if(Comp_1TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0} GetObj('ISL_Cont_1').scrollLeft+=num;setTimeout('CompScr_1()',TempSpeed)}} function picrun_ini(){ GetObj("List2_1").innerHTML=GetObj("List1_1").innerHTML; GetObj('ISL_Cont_1').scrollLeft=fill_1=0?fill_1:GetObj('List1_1').scrollWidth-Math.abs(fill_1); GetObj("ISL_Cont_1").onmouseover=function(){clearInterval(AutoPlayObj_1)} GetObj("ISL_Cont_1").onmouseout=function(){AutoPlay_1()} AutoPlay_1(); } //产品展示滚动图片结束 //-- /script style type="text/css" !-- BODY { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; FONT-FAMILY: 宋体; BACKGROUND-COLOR: #fff; BORDER-RIGHT-WIDTH: 0px } .blk_18 { BORDER-RIGHT: #e3e3e3 1px solid; BORDER-TOP: #e3e3e3 1px solid; MARGIN-TOP: 8px; FONT-SIZE: 12px; BACKGROUND: #f3f3f3; OVERFLOW: hidden; BORDER-LEFT: #e3e3e3 1px solid; WIDTH: 390px; BORDER-BOTTOM: #e3e3e3 1px solid; ZOOM: 1 } .blk_18 .pcont { FLOAT: left; OVERFLOW: hidden; WIDTH: 350px } .blk_18 .ScrCont { WIDTH: 32766px; ZOOM: 1 } .blk_18 #List1_1 { FLOAT: left } .blk_18 #List2_1 { FLOAT: left } .blk_18 .LeftBotton { BACKGROUND: url( ) no-repeat; FLOAT: left; MARGIN: 10px 1px; WIDTH: 15px; HEIGHT: 72px } .blk_18 .RightBotton { BACKGROUND: url( ) no-repeat; FLOAT: left; MARGIN: 10px 1px; WIDTH: 15px; HEIGHT: 72px } .blk_18 .LeftBotton { BACKGROUND-POSITION: 0px 0px; MARGIN-LEFT: 5px } .blk_18 .RightBotton { BACKGROUND-POSITION: 0px -100px; MARGIN-LEFT: -1px } .blk_18 .LeftBotton:hover { BACKGROUND-POSITION: -20px 0px } .blk_18 .RightBotton:hover { BACKGROUND-POSITION: -20px -100px } .blk_18 .pl IMG { DISPLAY: block; MARGIN: 6px auto 1px; CURSOR: pointer; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none } .blk_18 .pl { BORDER-RIGHT: #f3f3f3 1px solid; BORDER-TOP: #f3f3f3 1px solid; FLOAT: left; BORDER-LEFT: #f3f3f3 1px solid; WIDTH: 114px; LINE-HEIGHT: 24px; BORDER-BOTTOM: #f3f3f3 1px solid; TEXT-ALIGN: center; TEXT-DECORATION: underline } .blk_18 A.pl:hover { BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; BACKGROUND: #fff; BORDER-LEFT: #ff9900 1px solid; COLOR: #ff9900; BORDER-BOTTOM: #ff9900 1px solid } .commu_cont3 { MARGIN: 9px 7px 7px; LINE-HEIGHT: 150% } .commu_cont3 UL { WIDTH: 188px } -- /style /head body !-- picrotate_left start -- DIV class=blk_18A onmouseup=ISL_StopUp_1() class=LeftBotton onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1() href="javascript:void(0);" target=_self/A DIV class=pcont id=ISL_Cont_1 DIV class=ScrCont DIV id=List1_1!-- piclist begin --A class=pl href=" " target=_blankIMG height=72 alt=20-50元夏装抢疯 src=" " width=96美女小凡最新夏装/AA class=pl href=" " target=_blankIMG height=72 alt=韩国人气小耳环 src=" " width=96韩国人气小耳环/AA class=pl href=" " target=_blankIMG height=72 alt=3万6超值装修88平 src=" " width=963万6超值装修88平/AA class=pl href=" " target=_blankIMG height=72 alt=牛干巴敲开财富门 src=" " width=96牛干巴敲开财富门/AA class=pl href=" " target=_blankIMG height=72 alt=4K至7K高性能本本 src=" " width=964K至7K高性能本本/AA class=pl href=" " target=_blankIMG height=72 alt=7万装修102平婚房 src=" " width=967万装修102平婚房/AA class=pl href=" " target=_blankIMG height=72 alt=最新小车节油为主 src=" " width=96最新小车节油为主/AA class=pl href=" " target=_blankIMG height=72 alt="热门项目 BT烤翅" src=" " width=96热门项目 BT烤翅/AA class=pl href=" " target=_blankIMG height=72 alt=流行T恤+裤装 src=" " width=96要显瘦就这么穿!/A !-- piclist end --/DIV DIV id=List2_1/DIV/DIV/DIVA onmouseup=ISL_StopDown_1() class=RightBotton onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1() href="javascript:void(0);" target=_self/A/DIV SCRIPT type=text/javascript !-- picrun_ini() //-- /SCRIPT !-- picrotate_left end -- /body /html
图片不间断循环滚动代码(向左,向右,向上,向下)
//向左滚动script
var
speed=30
//滚动速度demo2.innerHTML=demo1.innerHTML
//滚动区域function
Marquee(){
//实现滚动的方法if(demo2.offsetWidth-demo.scrollLeft=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
//向左}
}
var
MyMar=setInterval(Marquee,speed)
demo.onmouseover=function()
{clearInterval(MyMar)}
demo.onmouseout=function()
{MyMar=setInterval(Marquee,speed)}
/script//向右滚动,其实代码差不多,就一个地方不一样script
var
speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function
Marquee(){
if(demo.scrollLeft=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
//向右}
}
var
MyMar=setInterval(Marquee,speed)
demo.onmouseover=function()
{clearInterval(MyMar)}
demo.onmouseout=function()
{MyMar=setInterval(Marquee,speed)}
/script
下面2个就是
上下的了script
var
speed=50
demo2.innerHTML=demo1.innerHTML
function
Marquee(){
if(demo2.offsetTop-demo.scrollTop=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var
MyMar=setInterval(Marquee,speed)
demo.onmouseover=function()
{clearInterval(MyMar)}
demo.onmouseout=function()
{MyMar=setInterval(Marquee,speed)}
/script
script
var
speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function
Marquee(){
if(demo1.offsetTop-demo.scrollTop=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var
MyMar=setInterval(Marquee,speed)
demo.onmouseover=function()
{clearInterval(MyMar)}
demo.onmouseout=function()
{MyMar=setInterval(Marquee,speed)}
/script
在图片上加连接
图片
网页制作-图片从左向右滚动代码
非常简单!!
MARQUEE
direction=right
IMG
src="http://图片地址"
/MARQUEE
如果你想多放几张图片,可以在MARQUEE/MARQUEE之间插入IMG
src="http://图片地址"
图片滚动效果是非常简单的~~还可以在这段代码里丰富你的指定
让图片从右到左滚动的网页代码是怎么样的?
往左是:
marqueeimg
src="你的图片地址"/marquee
往右是:
marquee
direction=rightimg
src="你的图片地址"/marquee
往上是:
marquee
direction=upimg
src="你的图片地址"/marquee
往下是:
marquee
direction=downimg
src="你的图片地址"/marquee
如果需要在当鼠标移动到图片上时停止滚动,就在marquee里加onmouseover=stop()
onmouseout=start(),
例如marquee
direction=down
onmouseover=stop()
onmouseout=start()img
src="你的图片地址"/marquee
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里面的图片 你自己找图片放进去就行了,欢迎采纳,
网页图片左右循环滚动代码
table width=514 border=0 align="center" cellpadding=0 cellspacing=0
tr
td div id=demo style="OVERFLOW: hidden;z-index: 3px; WIDTH: 514px"
table align=left border=0
tr
td id=demo1 table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"
tr align="center" valign="middle"
%
dim n1
n1=0
%
%while not rs.eof and n1999
if rs("picurl")"" then
n1=n1+1
%
tdtable border=0 align=center cellpadding=0 cellspacing=0trtdtable border=0 align=center cellpadding=2 cellspacing=2 bgcolor='#ffffff' style="border: 0px double #FFFFFF"trtdtable border=0 align=center cellpadding=3 cellspacing=2 bgcolor='#ffffff' style="border: 1px double #666666"
tr
td align="center" valign="middle"a href="shownews.asp?id=%=rs("newsid")%" target="_blank" title="%=rs("title")%"img src='../jindian/%=rs("picurl")%' alt='点击查看详细' height="111" border="0"/a/td
/tr
/table/td/tr/table/td/trtrtd align="center"% if len(rs("title"))11 then %%=mid(rs("title"),1,11)%...%else %%=rs("title")%%end if%/td/tr/table/td
td width=4/td
% end if
rs.movenext
wend
n1=0
rs.movefirst
%
%
while not rs.eof and n1999
if rs("picurl")"" then
n1=n1+1
%
% end if
rs.movenext
wend
%
/tr
/table/td
td id=demo2 valign=top /td
/tr
/table
/div
script
var speed3=20//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
/script /td
/tr
/table
图片从左向右滚动代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于html图片左右滚动代码点击、图片从左向右滚动代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-04公众号分享接口代码怎么写入(公众号接口开发教程源码+工具)[20240504更新]
- 05-04网贷代码是什么情况(网贷内部码)[20240504更新]
- 05-04asp.netdes加密代码(asp加密算法代码)[20240504更新]
- 05-04网站右下角视频代码(网页视频右上角下载)[20240504更新]
- 05-04软件公司代码管理软件(软件产品代码)[20240504更新]
- 05-04html图片源代码(html代码生成图片)[20240504更新]
- 05-04js提示气球代码(js提示气球代码不可用)[20240504更新]
- 05-04电商前台代码(电商前台代码是什么)[20240504更新]
- 05-04项目代码查询(建设项目代码查询)[20240504更新]
- 05-04用户注册关键代码(用户登录注册代码)[20240504更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接