{"id":133,"date":"2010-05-24T23:34:22","date_gmt":"2010-05-24T15:34:22","guid":{"rendered":"http:\/\/www.jpuyy.com\/blog\/?p=133"},"modified":"2016-09-30T11:00:07","modified_gmt":"2016-09-30T03:00:07","slug":"scroll-pictures-using-javascript","status":"publish","type":"post","link":"https:\/\/jpuyy.com\/?p=133","title":{"rendered":"scroll pictures using JavaScript."},"content":{"rendered":"<p>\u627e\u8ba1\u7b97\u673a\u7684\u4e1c\u897f\uff0c\u8fd8\u662f\u8981\u4e0a\u5916\u56fd\u7f51\u7ad9.<br \/>\nhttp:\/\/www.houseofscripts.com\/scripts\/javascripts\/scrollpics.htm<br \/>\n&lt;blockquote&gt;&lt;code&gt;<br \/>\n1. HEAD<br \/>\n&lt;script type=&#8221;text\/javascript&#8221; language=&#8221;JavaScript&#8221;&gt;\/\/ &lt;![CDATA[<br \/>\n\/\/Script submitted by vasile birsan<br \/>\n\/\/http:\/\/members.home.net\/v.birsan\/<br \/>\n\/\/Displayed on www.a1javascripts.com\/<br \/>\n\/\/slider&#8217;s width<br \/>\nvar swidth=102<\/p>\n<p>\/\/slider&#8217;s height<br \/>\nvar sheight=82<br \/>\n\/\/slider&#8217;s speed;<br \/>\nvar sspeed=2<\/p>\n<p>var imagef=&#8221;<\/p>\n<p>\/\/images: change to your own<br \/>\nvar leftimage=new Array();<br \/>\nleftimage[0]='&lt;img src=&#8221;images\/flamingo.jpg&#8221; width=100 height=80 alt=&#8221;Flamingo&#8221; border=1&gt;&#8217;<br \/>\nleftimage[1]='&lt;img src=&#8221;images\/macaw1.jpg&#8221; width=100 height=80 border=1&gt;&#8217;<br \/>\nleftimage[2]='&lt;img src=&#8221;images\/macaw2.jpg&#8221; width=100 height=80 border=1&gt;&#8217;<br \/>\nfor (mi=0;mi&lt;leftimage.length;mi++)<br \/>\nimagef=imagef+leftimage[mi]<\/p>\n<p>function start(){<br \/>\nif (document.all) return<br \/>\nif (document.getElementById){<br \/>\ndocument.getElementById(&#8220;slider&#8221;).style.visibility=&#8221;show&#8221;<br \/>\ninitial6(document.getElementById(&#8216;slider&#8217;))<br \/>\n}<br \/>\nelse if(document.layers){<br \/>\ndocument.slider1.visibility=&#8221;show&#8221;<br \/>\nintialslide()<br \/>\n}<br \/>\n}<br \/>\nfunction intialslide(){<br \/>\ndocument.slider1.document.slider2.document.write(&#8216;&lt;nobr&gt;&#8217;+imagef+'&lt;\/nobr&gt;&#8217;)<br \/>\ndocument.slider1.document.slider2.document.close()<br \/>\nthel=document.slider1.document.slider2.document.width<br \/>\ndocument.slider1.document.slider2.left-=thel<br \/>\nsslide()<br \/>\n}<br \/>\nfunction sslide(){<br \/>\nif (document.slider1.document.slider2.left&gt;=thel*(-1)){<br \/>\ndocument.slider1.document.slider2.left-=sspeed<br \/>\nsetTimeout(&#8220;sslide()&#8221;,100)<br \/>\n}<br \/>\nelse{<br \/>\ndocument.slider1.document.slider2.left=swidth<br \/>\nsslide()<br \/>\n}<br \/>\n}<br \/>\nfunction initial6(whichdiv){<br \/>\ntdiv6=eval(whichdiv)<br \/>\ntdiv6.innerHTML=(&#8216;&lt;nobr&gt;&#8217;+imagef+'&lt;\/nobr&gt;&#8217;)<br \/>\ntdiv6.style.left=swidth<br \/>\nthel=swidth*leftimage.length<br \/>\nscroll6()<br \/>\n}<br \/>\nfunction scroll6(){<br \/>\nif (parseInt(tdiv6.style.left)&gt;=thel*(-1)){<br \/>\ntdiv6.style.left=parseInt(tdiv6.style.left)-sspeed<br \/>\nsetTimeout(&#8220;scroll6()&#8221;,100)<br \/>\n}<br \/>\nelse{<br \/>\ntdiv6.style.left=swidth<br \/>\nscroll6()<br \/>\n}<br \/>\n}<br \/>\n\/\/You might run into a position problem within the page, using either<br \/>\n\/\/NS4.x or NS6.x. To correct this use the coordinates: &#8216;left=value&#8217;,<br \/>\n\/\/&#8217;top=value&#8217; within ilayer\/layer tags or &#8216;position:relative\/absolute;<br \/>\n\/\/left:value;top:value;&#8217; within NS6&#8217;s div tags.<br \/>\n\/\/Those values can be either positive or negative!<br \/>\n\/\/Make sure you&#8217;ve got the onload=&#8217;&#8230;;&#8217; within body tag but without<br \/>\n\/\/takeFocus(); there!<br \/>\n\/\/ ]]&gt;&lt;\/script&gt;<br \/>\n2. BODY&lt;\/code&gt;<\/p>\n<p>3. Place inside the body where you want it to display.<br \/>\n&lt;script type=&#8221;text\/javascript&#8221; language=&#8221;JavaScript&#8221;&gt;\/\/ &lt;![CDATA[<br \/>\nif (document.all){<br \/>\ndocument.write(&#8216;&lt;marquee id=&#8221;slidere&#8221; scrollAmount=2 style=&#8221;width:102;height:82;&#8221;&gt;&#8217;+imagef+'&lt;\/marquee&gt;&#8217;)<br \/>\nslidere.onmouseover=new Function(&#8220;slidere.scrollAmount=0&#8221;)<br \/>\nslidere.onmouseout=new Function(&#8220;if (document.readyState==&#8217;complete&#8217;) slidere.scrollAmount=2&#8243;)<br \/>\n}<br \/>\nif (document.layers){<br \/>\ndocument.write(&#8216;&lt;ilayer width=102 height=82 name=&#8221;slider1&#8243; bgcolor=&#8221;white&#8221; visibility=hide&gt;&#8217;)<br \/>\ndocument.write(&#8216;&lt;layer name=&#8221;slider2&#8243; onMouseover=&#8221;sspeed=0;&#8221; onMouseout=&#8221;sspeed=2&#8243;&gt;&#8217;)<br \/>\ndocument.write(&#8216;&lt;\/layer&gt;&#8217;)<br \/>\ndocument.write(&#8216;&lt;\/ilayer&gt;&#8217;)<br \/>\n}<br \/>\nif (document.getElementById&amp;#038;&amp;#038;!document.all){<br \/>\ndocument.write(&#8216;<\/p>\n<p>&lt;div style=&#8221;position:absolute;width:102;height:82;clip:rect(0 102 82 0);&#8221;&gt;&#8217;)<br \/>\ndocument.write(&#8216;<\/p>\n<p>&lt;div id=&#8221;slider&#8221; style=&#8221;position:relative;width:&amp;#038;{swidth};&#8221; onMouseover=&#8221;sspeed=0;&#8221; onMouseout=&#8221;sspeed=2&#8243;&gt;&#8217;)<br \/>\ndocument.write(&#8216;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/p>\n<p>&#8216;)<br \/>\n}<br \/>\n\/\/ ]]&gt;&lt;\/script&gt;<\/p>\n<p>&amp;nbsp;&lt;\/blockquote&gt;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u627e\u8ba1\u7b97\u673a\u7684\u4e1c\u897f\uff0c\u8fd8\u662f\u8981\u4e0a\u5916\u56fd\u7f51\u7ad9. http:\/\/www.houseofscripts.com\/scripts\/javascripts\/scrollpics.htm &lt;blockquote&gt;&lt;code&gt; 1. HEAD &lt;script type=&#8221;text\/javascript&#8221; language=&#8221;JavaScript&#8221;&gt;\/\/ &lt;![CDATA[ \/\/Script submitted by vasile birsan \/\/http:\/\/members.home.net\/v.birsan\/ \/\/Displayed on www.a1javascripts.com\/ \/\/slider&#8217;s width var swidth=102 \/\/slider&#8217;s height var sheight=82 \/\/slider&#8217;s speed; var sspeed=2 var imagef=&#8221; \/\/images: change to your own var leftimage=new Array(); leftimage[0]='&lt;img src=&#8221;images\/flamingo.jpg&#8221; width=100 height=80 alt=&#8221;Flamingo&#8221; border=1&gt;&#8217; leftimage[1]='&lt;img src=&#8221;images\/macaw1.jpg&#8221; width=100 height=80 border=1&gt;&#8217; leftimage[2]='&lt;img src=&#8221;images\/macaw2.jpg&#8221; width=100 height=80 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[64],"tags":[27],"class_list":["post-133","post","type-post","status-publish","format-standard","hentry","category-web","tag-xhtml"],"_links":{"self":[{"href":"https:\/\/jpuyy.com\/index.php?rest_route=\/wp\/v2\/posts\/133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jpuyy.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jpuyy.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jpuyy.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/jpuyy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=133"}],"version-history":[{"count":9,"href":"https:\/\/jpuyy.com\/index.php?rest_route=\/wp\/v2\/posts\/133\/revisions"}],"predecessor-version":[{"id":7966,"href":"https:\/\/jpuyy.com\/index.php?rest_route=\/wp\/v2\/posts\/133\/revisions\/7966"}],"wp:attachment":[{"href":"https:\/\/jpuyy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jpuyy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jpuyy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}