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

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

方法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