.图片滚动效果实现的几种方式
方法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 <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>
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>
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