优秀是一种习惯，不求进步很大，但求天天进步。

像蜗牛一样爬行，坚信总有一天我有属于我的一片天。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

网站中图片滚动效果的实现方法集锦

Posted on 2011-03-09 09:51  StartFromZero  阅读(748)  评论(0)  编辑  收藏  举报

.图片滚动效果实现的几种方式

方法1.实现图片的上下，左右单独的方向滚动。

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 <!--CSS代码段-->
  7 <style type="text/css">
  8 body{margin:0px auto; padding:0px;}
  9 ul,li{margin:0px; padding:0px;list-style:none;}
 10 
 11 .sqBorder_left {width:620px; height:62px; padding:10px; border:1px #000000 solid; background:#555555;}
 12 .scroll_div_left {width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
 13 .scroll_div_left img {width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;}
 14 .scroll_div_left #scroll_begin, .scroll_div_left #scroll_end, .scroll_div_left #scroll_begin ul, .scroll_div_left #scroll_end ul, .scroll_div_left #scroll_begin ul li, .scroll_div_left #scroll_end ul li{display:inline;}/*设置ul和li横排，此行样式重要*/
 15 
 16 
 17 .sqBorder_top {width:122px; height:182px; padding:10px; border:1px #000000 solid; background:#555555;}
 18 .scroll_div_top {width:122px; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
 19 .scroll_div_top img {width:120px;height:60px;border:0;margin: 8px auto; border:1px #efefef solid;}
 20 
 21 </style>
 22 
 23 <!--JS代码段-->
 24 <script language="JavaScript">
 25 //正则得到地址栏传递参数的函数
 26 function getPara(paraName){ 
 27 var url = location.href;
 28 var str="(?:\\?|&){1}"+paraName+"=([^&]*)"
 29 var re=new RegExp(str,"gi");
 30 re.exec(url);
 31 return RegExp.$1;
 32 }
 33 
 34 //设置CSS
 35 function setScroll(mode){
 36 if(!mode||mode=="left"||mode=="right"){
 37     document.getElementById("sqBorder").className="sqBorder_left";
 38     document.getElementById("scroll_div").className="scroll_div_left";
 39 }else if(mode=="top"||mode=="bottom"){
 40     document.getElementById("sqBorder").className="sqBorder_top";
 41     document.getElementById("scroll_div").className="scroll_div_top";
 42 }
 43 }
 44 //设置滚动
 45 function PicScroll(mode){
 46 window.location.href="?action="+mode+"";
 47 return false;
 48 }
 49 </script>
 50 
 51 <script language="javascript">
 52 <!--
 53 //图片滚动核心代码
 54 function ScrollImg(ScrollType){
 55 /*ScrollType参数有：top,bottom,left,right*/
 56 var speed=5 //值越大速度越小 
 57 var scroll_begin = document.getElementById("scroll_begin");
 58 var scroll_end = document.getElementById("scroll_end");
 59 var scroll_div = document.getElementById("scroll_div");
 60 scroll_end.innerHTML=scroll_begin.innerHTML
 61 function Marquee(){
 62     //if (ScrollType=="left"){
 63     if (!ScrollType||ScrollType=="left"){
 64       if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
 65         scroll_div.scrollLeft-=scroll_begin.offsetWidth
 66       else
 67         scroll_div.scrollLeft++
 68     }else if (ScrollType=="top"){
 69       if(scroll_end.offsetTop-scroll_div.scrollTop<=0)
 70         scroll_div.scrollTop-=scroll_begin.offsetHeight
 71       else
 72         scroll_div.scrollTop++
 73     }else if (ScrollType=="bottom"){
 74       if(scroll_begin.offsetTop-scroll_div.scrollTop>=0)
 75         scroll_div.scrollTop+=scroll_end.offsetHeight
 76       else
 77         scroll_div.scrollTop--
 78     }else if (ScrollType=="right"){
 79       if(scroll_div.scrollLeft<=0)
 80         scroll_div.scrollLeft+=scroll_end.offsetWidth
 81       else
 82         scroll_div.scrollLeft--
 83     }
 84 }
 85 
 86 var MyMar=setInterval(Marquee,speed)
 87 scroll_div.onmouseover=function() {clearInterval(MyMar)}
 88 scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 89 }
 90 //-->
 91 </script>
 92 </head>
 93 
 94 <body>
 95 
 96 
 97 <h2 align="center">玩转四向区域滚动,请保存到本地测试。</h2>
 98 <div align="center"><input type="button" value="←向左滚动" onClick="PicScroll('left');"> <input type="button" value="向右滚动→" onClick="PicScroll('right');"> <input type="button" value="↑向上滚动" onClick="PicScroll('top');"> <input type="button" value="向下滚动↓" onClick="PicScroll('bottom');"></div><br />
 99 <div style="text-align:center">
100 <div id="sqBorder" class="sqBorder_left">
101 <!--#####滚动区域#####-->
102     <div id="scroll_div" class="scroll_div_left">
103       <div id="scroll_begin">
104         <ul>
105           <li><a href="www.feelife.net"><img src="www.feelife.netimages/main_logo.gif" alt="『一网传媒』" /></a></li>
106           <li><a href="www.feelife.net"><img src="www.feelife.netimages/main_logo.gif" alt="『一网传媒』" /></a></li>
107           <li><a href="www.feelife.net"><img src="www.feelife.netimages/main_logo.gif" alt="『一网传媒』" /></a></li>
108           <li><a href="www.feelife.net"><img src="www.feelife.netimages/main_logo.gif" alt="『一网传媒』" /></a></li>
109           <li><a href="www.feelife.net"><img src="www.feelife.netimages/main_logo.gif" alt="『一网传媒』" /></a></li>
110           <li><a href="www.feelife.net"><img src="www.feelife.netimages/main_logo.gif" alt="『一网传媒』" /></a></li>
111           <li><a href="www.feelife.net"><img src="www.feelife.netimages/main_logo.gif" alt="『一网传媒』" /></a></li>
112           <li><a href="www.feelife.net"><img src="www.feelife.netimages/main_logo.gif" alt="『一网传媒』" /></a></li>
113           <li><a href="www.feelife.net"><img src="www.feelife.netimages/main_logo.gif" alt="『一网传媒』" /></a></li>
114           <li><a href="www.feelife.net"><img src="www.feelife.netimages/main_logo.gif" alt="『一网传媒』" /></a></li>
115         </ul>
116       </div>
117       <div id="scroll_end"></div>
118     </div>
119 <!--#####滚动区域#####-->
120 </div>
121 <script type="text/javascript">setScroll(getPara("action"));ScrollImg(getPara("action"));</script>
122 </div>
123 
124 
125 </body>
126 </html>




 

方法2,.实现图片的几张图片连续滚动

实现图片的左右滚动效：

源码下载：demo1.rar

 

方法3.实现图片的无缝，连续，平滑滚动。（table布局版本）

 

View Code
 1     <div class="product">
 2     
 3     
 4     
 5     <img  src="images/pic5.jpg" alt="" style="margin:0px 2px 33px 0px;float:left;" onclick="toLeft()"/>
 6     
 7     <div id="scrollbody">
 8             <table>
 9                 <tbody>
10                 <tr>
11                 <td id="scroll1">
12                 <table cellpadding="0" border="0" align="left" valign="center" cellspace="0">
13                 <tbody><tr>
14                 <td><div class="Pic"><a target="_blank" href="http://www.gzxyprint.com"><img alt="广州新怡印务有限公司"  src="images/product1.jpg" /></a></div></td>    
15                                             
16                     
17                 <td><div class="Pic"><a target="_blank" href="http://www.163css.com"><img alt="网聚重构设计"  src="images/product2.jpg" /></a></div></td>    
18                                             
19                     
20                 <td><div class="Pic"><a target="_blank" href="http://www.jmeii.com"><img alt="广州简美网络科技有限公司"  src="images/product3.jpg" /></a></div></td>    
21                                             
22                     
23                 <td><div class="Pic"><a target="_blank" href="http://www.byqpw.com"><img alt="百业汽配网"  src="images/product4.jpg" /></a></div></td>    
24     
25                 </tr></tbody></table>
26                 </td>
27                 <td id="scroll2">
28                 </td>
29                 </tr>
30                 </tbody>
31             </table>
32             </div>
33     <img src="images/pic6.jpg" onclick="toRight()" style="margin:0 0 33px 5px;" alt=""/>
34     
35     
36     </div>

 

（ul，li布局实现的）

 

 

View Code
 1   <div class="product"> <img  src="images/pic5.jpg" alt="" style="margin:0px 2px 33px 0px;float:left;" onclick="toLeft()"/>
 2 <!--#####滚动区域#####-->
 3     <div id="scroll_div" class="scroll_div_left">
 4       <div id="scroll_begin">
 5         <ul>
 6           <li><a href="www.feellife.net"><img src="images/product1.jpg" alt="『一网传媒』" /></a></li>
 7           <li><a href="www.feellife.net"><img src="images/product2.jpg" alt="『一网传媒』" /></a></li>
 8           <li><a href="www.feellife.net"><img src="images/product3.jpg" alt="『一网传媒』" /></a></li>
 9           <li><a href="www.feellife.net"><img src="images/product4.jpg" alt="『一网传媒』" /></a></li>
10         </ul>
11       </div>
12       <div id="scroll_end"></div>
13     </div>
14 <!--#####滚动区域#####-->
15     <img src="images/pic6.jpg" onclick="toRight()" style="margin:0 0 33px 5px;" alt=""/></div>

 

table布局方式源码： demo2.rar

ul，li布局方式源码：demo3.rar

 

方法4.实现图片的每次一张图片的滚动。

 

http://www.feelife.net/，单击按钮一次实现一张图片的滚动。利用jqurry实现。

源码：demo4.rar