网页图片的滚动效果
有好久没来了，前段时间生病了，所以也没时间添加东西和学习，还有就是先给给我留言和回复的学友道声歉，没能及时给你们解决问题和回答，在这里深感抱歉...好了，别的就不多说了，说说最近的问题吧。
最近有点忙，以前没接触过网页图片的滚动效果的制作，现在要实现这个了，就临时抱抱佛脚学习了点，现在整理下，以免忘了，多多积累。现在才体会到：书到用时方恨少！好了，别的就不啰嗦了，现在整理了三个模板的滚动效果。
模板一：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>
就写着几个吧，其它的如果大家要用，就去网上搜吧，只是帮助自己记住这些而已，当然如果各位觉得可以就可以拿去试试。
