怎么用Java代碼使圖片自行滾動瀏覽

本文轉載自查看原文 2013-03-25 08:27 4585 滾動圖片/ 軟件編程

圖片循環滾動代碼和圖片無縫滾動代碼

先介紹一下它的實現思路：一個設定寬度並且隱藏超出它寬度的內容的容器demo，里面放demo1和demo2，demo1是滾動內容,demo2為demo1的直接克隆，通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的，滾動至demo1與demo2的交界處時直接跳回初始位置，因為demo1與demo2一樣，所以分不出跳動的瞬間。

先了解一下對象的幾個的屬性：
innerHTML:設置或獲取位於對象起始和結束標簽內的 HTML
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
offsetWidth:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的寬度

向上滾動的代碼：
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML//克隆demo1為demo2
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//當滾動至demo1與demo2交界時
demo.scrollTop-=demo1.offsetHeight//demo跳到最頂端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//設置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠標移上時清除定時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠標移開時重設定時器
</script>

向下滾動：
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(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>

向左滾動：
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div>
<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>

向右滾動：
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
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>

<div id="mhmove" style="overflow:hidden;width:800px;margin:0 auto 0;">
    <table width="800px" border="0" cellspacing="0" cellpadding="0">
    <tr>

<td width="172" align="center"><img src="tupian/tupian1/92[1].jpg" width="166" height="117" border="0" usemap="#Map5" /></td>

    <td width="172" align="center"><img src="tupian/dujuan_da2.jpg" width="166" height="117" border="0" usemap="#Map6" /></td>
       </tr>

      </table></td>
      <td width="50" id="mhmove2"> </td>
    </tr>
</table>
   </div>

          <script>
    var speed=40 ;
    mhmove2.innerHTML=mhmove1.innerHTML;
    function Marquee3(){
     if(mhmove2.offsetWidth-mhmove.scrollLeft<=0)
      mhmove.scrollLeft-=mhmove1.offsetWidth;
     else{
      mhmove.scrollLeft++;
     }
    }
    function Marquee4(){
     if(mhmove2.offsetHeight-mhmove.scrollTop<=0)
      mhmove.scrollTop-=mhmove1.offsetHeight;
     else{
      mhmove.scrollTop++;
     }
    }
    var MyMar2=setInterval(Marquee3,speed);
    mhmove.onmouseover=function() {clearInterval(MyMar2)}
    mhmove.onmouseout=function() {MyMar2=setInterval(Marquee3,speed)}
   </script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html 圖片滾動代碼 JS圖片滾動代碼（無縫、平滑） HTML 中讓DIV不隨滾動條滾動，使終顯示在瀏覽器的固定位置 CSS里使BODY的背景圖片固定不動內容滾動 jquery 鼠標控制並帶有數字的圖片循環滾動代碼 markdown 使圖片左對齊 webpack4與babel配合使es6代碼可運行於低版本瀏覽器 Jquery使兩個Div的滾動條同步滾動如何使用java代碼實現圖片的合成 java代碼實現圖片內容轉文字