有好久沒來了，前段時間生病了，所以也沒時間添加東西和學習，還有就是先給給我留言和回復的學友道聲歉，沒能及時給你們解決問題和回答，在這里深感抱歉...好了，別的就不多說了，說說最近的問題吧。
最近有點忙，以前沒接觸過網頁圖片的滾動效果的制作，現在要實現這個了，就臨時抱抱佛腳學習了點，現在整理下，以免忘了，多多積累。現在才體會到：書到用時方恨少！好了，別的就不啰嗦了，現在整理了三個模板的滾動效果。
模板一：js動態圖片滾動效果
非常平滑的JS圖片滾動特效代碼，無縫循環，速度可自定義，鼠標懸停時停止。它的特點是JS和圖片地址分離，這樣做你就經易的從數據庫動態調用每張圖片的地址，方便控制，因此它非常的應用。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>圖片滾動</title> 6 </head> 7 <body> 8 <style type="text/css"> 9 <!-- 10 #demo { 11 background: #FFF; 12 overflow:hidden; 13 border: 1px dashed #CCC; 14 width: 500px; 15 } 16 #demo img { 17 border: 3px solid #F2F2F2; 18 } 19 #indemo { 20 float: left; 21 width: 800%; 22 } 23 #demo1 { 24 float: left; 25 } 26 #demo2 { 27 float: left; 28 } 29 --> 30 </style> 31 <div id="demo"> 32 <div id="indemo"> 33 <div id="demo1"> 34 <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a> 35 <a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a> 36 <a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a> 37 <a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a> 38 <a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a> 39 <a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a> 40 </div> 41 <div id="demo2"></div> 42 </div> 43 </div> 44 <script> 45 <!-- 46 var speed=10; 47 var tab=document.getElementById("demo"); 48 var tab1=document.getElementById("demo1"); 49 var tab2=document.getElementById("demo2"); 50 tab2.innerHTML=tab1.innerHTML; 51 function Marquee(){ 52 if(tab2.offsetWidth-tab.scrollLeft<=0) 53 tab.scrollLeft-=tab1.offsetWidth 54 else{ 55 tab.scrollLeft++; 56 } 57 } 58 var MyMar=setInterval(Marquee,speed); 59 tab.onmouseover=function() {clearInterval(MyMar)}; 60 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 61 --> 62 </script> 63 </body> 64 </html>
注：var speed = 10;數越小，滾動的速度就越快。
<div id="demo2"></div>是必須要有的。
模板二：常用JS圖片滾動（無縫、平滑、上下左右滾動）
本源代碼收集了一些常用的網頁圖片滾動，無縫滾動，效果很平滑，包括上下左右四個方向的滾動，或許你現在用不上這些代碼，不過先收藏起來。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>向上下左右不間斷無縫滾動圖片的效果(兼容火狐和IE)- www.codefans.net</title> 6 </head> 7 <body> 8 <div id="colee" style="overflow:hidden;height:253px;width:410px;"> 9 <div id="colee1"> 10 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 11 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 12 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 13 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 14 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 15 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 16 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 17 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 18 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 19 </div> 20 <div id="colee2"></div> 21 </div> 22 <script> 23 var speed=30; 24 var colee2=document.getElementById("colee2"); 25 var colee1=document.getElementById("colee1"); 26 var colee=document.getElementById("colee"); 27 colee2.innerHTML=colee1.innerHTML; //克隆colee1為colee2 28 function Marquee1(){ 29 //當滾動至colee1與colee2交界時 30 if(colee2.offsetTop-colee.scrollTop<=0){ 31 colee.scrollTop-=colee1.offsetHeight; //colee跳到最頂端 32 }else{ 33 colee.scrollTop++ 34 } 35 } 36 var MyMar1=setInterval(Marquee1,speed)//設置定時器 37 //鼠標移上時清除定時器達到滾動停止的目的 38 colee.onmouseover=function() {clearInterval(MyMar1)} 39 //鼠標移開時重設定時器 40 colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} 41 </script> 42 <!--向上滾動代碼結束--> 43 <br> 44 <!--下面是向下滾動代碼--> 45 <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"> 46 <div id="colee_bottom1"> 47 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 48 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 49 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 50 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 51 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 52 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 53 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 54 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 55 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 56 </div> 57 <div id="colee_bottom2"></div> 58 </div> 59 <script> 60 var speed=30 61 var colee_bottom2=document.getElementById("colee_bottom2"); 62 var colee_bottom1=document.getElementById("colee_bottom1"); 63 var colee_bottom=document.getElementById("colee_bottom"); 64 colee_bottom2.innerHTML=colee_bottom1.innerHTML 65 colee_bottom.scrollTop=colee_bottom.scrollHeight 66 function Marquee2(){ 67 if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0) 68 colee_bottom.scrollTop+=colee_bottom2.offsetHeight 69 else{ 70 colee_bottom.scrollTop-- 71 } 72 } 73 var MyMar2=setInterval(Marquee2,speed) 74 colee_bottom.onmouseover=function() {clearInterval(MyMar2)} 75 colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)} 76 </script> 77 <!--向下滾動代碼結束--> 78 <br> 79 <!--下面是向左滾動代碼--> 80 <div id="colee_left" style="overflow:hidden;width:500px;"> 81 <table cellpadding="0" cellspacing="0" border="0"> 82 <tr><td id="colee_left1" valign="top" align="center"> 83 <table cellpadding="2" cellspacing="0" border="0"> 84 <tr align="center"> 85 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 86 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 87 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 88 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 89 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 90 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 91 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 92 </tr> 93 </table> 94 </td> 95 <td id="colee_left2" valign="top"></td> 96 </tr> 97 </table> 98 </div> 99 <script> 100 //使用div時，請保證colee_left2與colee_left1是在同一行上. 101 var speed=30//速度數值越大速度越慢 102 var colee_left2=document.getElementById("colee_left2"); 103 var colee_left1=document.getElementById("colee_left1"); 104 var colee_left=document.getElementById("colee_left"); 105 colee_left2.innerHTML=colee_left1.innerHTML 106 function Marquee3(){ 107 if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是對象的可見寬度 108 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是對象的實際內容的寬，不包邊線寬度 109 else{ 110 colee_left.scrollLeft++ 111 } 112 } 113 var MyMar3=setInterval(Marquee3,speed) 114 colee_left.onmouseover=function() {clearInterval(MyMar3)} 115 colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} 116 </script> 117 <!--向左滾動代碼結束--> 118 <br> 119 <!--下面是向右滾動代碼--> 120 <div id="colee_right" style="overflow:hidden;width:500px;"> 121 <table cellpadding="0" cellspacing="0" border="0"> 122 <tr><td id="colee_right1" valign="top" align="center"> 123 <table cellpadding="2" cellspacing="0" border="0"> 124 <tr align="center"> 125 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 126 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 127 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 128 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 129 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 130 </tr> 131 </table> 132 </td> 133 <td id="colee_right2" valign="top"></td> 134 </tr> 135 </table> 136 </div> 137 <script> 138 var speed=30//速度數值越大速度越慢 139 var colee_right2=document.getElementById("colee_right2"); 140 var colee_right1=document.getElementById("colee_right1"); 141 var colee_right=document.getElementById("colee_right"); 142 colee_right2.innerHTML=colee_right1.innerHTML 143 function Marquee4(){ 144 if(colee_right.scrollLeft<=0) 145 colee_right.scrollLeft+=colee_right2.offsetWidth 146 else{ 147 colee_right.scrollLeft-- 148 } 149 } 150 var MyMar4=setInterval(Marquee4,speed) 151 colee_right.onmouseover=function() {clearInterval(MyMar4)} 152 colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)} 153 </script> 154 <!--向右滾動代碼結束--> 155 </body> 156 </html>
模塊三：jQuery控制圖片淡入淡出效果
Query控制圖片淡入淡出效果，或許見的多了就不足為奇了，淡入淡出效果不論是在WEB或是WinForm編程中都使用廣泛，很經典的一款轉場或圖片切換特效，在此，把基於jquery實現的圖片淡入淡出效果分享給大家，希望對你的編程有幫助。
View Code
1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>jQuery控制圖片淡入淡出效果</title> 5 <script src="/ajaxjs/jquery1.3.2.js" type="text/javascript" charset="utf-8"></script> 6 <style type="text/css"> 7 ul li{position:absolute;left:50px;top:20px;} 8 .onoe{display:none;} 9 </style> 10 </head> 11 <body> 12 <ul> 13 <li><img src="/jscss/demoimg/wall1.jpg"></li> 14 <li><img src="/jscss/demoimg/wall2.jpg"></li> 15 <li><img src="/jscss/demoimg/wall3.jpg"></li> 16 </ul> 17 <script> 18 $(function(){ 19 var n = 2; 20 setInterval(function(){ 21 if(! $("ul li").eq(n).is(":hidden")){ 22 $("ul li").eq(n).fadeOut("slow") 23 }else{ 24 $("ul li").eq(n).fadeIn("slow") 25 } 26 n--; 27 if(n == 0){ 28 n = 2; 29 }; 30 },2000); 31 }); 32 33 </script> 34 </body> 35 </html>
就寫着幾個吧，其它的如果大家要用，就去網上搜吧，只是幫助自己記住這些而已，當然如果各位覺得可以就可以拿去試試。