热搜词
phpcms v9兼容性较好的图片无缝隙滚动代码 精华
灰儿 管理员 发消息 加好友 打招呼
发表于 2014-3-7 14:46:01 | 显示全部楼层 |阅读模式
此图片无缝隙滚动代码在IE8下使用兼容性较好，推荐phpcms v9首页模板中使用。效果如图：

01.jpg

首页模板代码：



  2. <P> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>">
  3. <html xmlns="<A href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <title>滚动图片效果</title>
  7. <link href="style.css" rel="stylesheet" type="text/css" />
  8. <script type="text/javascript" src="sileder.js"></script>
  9. </head>
  10. <body>
  11. <div class="contant">
  12.   <div class="ztbd">
  13.     <div class="ztbd_t">
  14.       <h2><a href="#">滚动图片效果</a></h2>
  15.       <span class="span_more"><a href="#">more</a></span></div>
  16.     <div class="blk_18"> <a onmouseup="ISL_StopUp_1()" class="LeftBotton" onmousedown="ISL_GoUp_1()" onmouseout="ISL_StopUp_1()" href="javascript:void(0);" target="_self"></a>
  17.       <div class="pcont" id="ISL_Cont_1">
  18.         <div class="ScrCont">
  19.           <div id="List1_1">
  20.             <ul>
  21.               <li><a href="#" target="_blank"><img src="img/pic1.jpg" width="166px" height="108px"/></a></li>
  22.               <li><a href="#" target="_blank"><img src="img/pic2.jpg" width="166px" height="108px"/></a></li>
  23.               <li><a href="#" target="_blank"><img src="img/pic1.jpg" width="166px" height="108px"/></a></li>
  24.               <li><a href="#" target="_blank"><img src="img/pic2.jpg" width="166px" height="108px"/></a></li>
  25.                <li><a href="#" target="_blank"><img src="img/pic1.jpg" width="166px" height="108px"/></a></li>
  26.               <li><a href="#" target="_blank"><img src="img/pic2.jpg" width="166px" height="108px"/></a></li>
  27.               <li><a href="#" target="_blank"><img src="img/pic1.jpg" width="166px" height="108px"/></a></li>
  28.               <li><a href="#" target="_blank"><img src="img/pic2.jpg" width="166px" height="108px"/></a></li>
  29.                            <li><a href="#" target="_blank"><img src="img/pic1.jpg" width="166px" height="108px"/></a></li>
  30.               <li><a href="#" target="_blank"><img src="img/pic2.jpg" width="166px" height="108px"/></a></li>
  31.             </ul>
  32.           </div>
  33.           <div id="List2_1"></div>
  34.         </div>
  35.       </div>
  36.       <a onmouseup="ISL_StopDown_1()" class="RightBotton" onmousedown="ISL_GoDown_1()" onmouseout="ISL_StopDown_1()" href="javascript:void(0);" target="_self"></a> </div>
  37.     <script type="text/javascript">
  38.    picrun_ini()
  39. </script>
  40.   </div>
  41. </div>
  42. </body>
  43. </html></P>
复制代码
css代码：
  1. .contant {
  2. MARGIN-TOP: 5px; WIDTH: 960px; position:relative
  3. }
  4. .ztbd {
  5. BORDER-BOTTOM: #e1e4e6 1px solid; BORDER-LEFT: #e1e4e6 1px solid; MARGIN-TOP: 10px; HEIGHT: 203px; BORDER-TOP: #779ab1 3px solid; BORDER-RIGHT: #e1e4e6 1px solid
  6. }
  7. .ztbd_t {
  8. BACKGROUND: url(img/ui.gif) 0px -89px; HEIGHT: 34px
  9. }
  10. .ztbd_t H2 {
  11. LINE-HEIGHT: 35px; PADDING-LEFT: 26px; FONT-FAMILY: "Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti; FLOAT: left; COLOR: #fff; FONT-SIZE: 15px
  12. }
  13. .ztbd_t H2 A {
  14. COLOR: #056f8a; TEXT-DECORATION: none
  15. }
  16. .span_more {
  17. TEXT-INDENT: -9999px; MARGIN: 12px 10px 0px 0px; FLOAT: right; OVERFLOW: hidden
  18. }
  19. .span_more A {
  20. WIDTH: 31px; DISPLAY: block; BACKGROUND: url(img/ui.gif) 31px 45px; HEIGHT: 9px
  21. }
  22. .span_more A:hover {
  23. WIDTH: 31px; DISPLAY: block; BACKGROUND: url(img/ui.gif) 67px 45px; HEIGHT: 9px
  24. }

  26. .blk_18 {
  27. MARGIN-TOP: 8px; WIDTH: 960px; ZOOM: 1; FONT-SIZE: 12px; OVERFLOW: hidden
  28. }
  29. .blk_18 .pcont {
  30. WIDTH: 920px; FLOAT: left; MARGIN-LEFT: 2px; OVERFLOW: hidden
  31. }
  32. .blk_18 .ScrCont {
  33. WIDTH: 32766px; ZOOM: 1
  34. }
  35. .blk_18 .ScrCont LI {
  36. WIDTH: 174px; FLOAT: left; HEIGHT: 140px; MARGIN-LEFT: 10px
  37. }
  38. .blk_18 .ScrCont LI IMG {
  39. BORDER-BOTTOM: #b7c6d1 1px solid; BORDER-LEFT: #b7c6d1 1px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; WIDTH: 166px; PADDING-RIGHT: 3px; DISPLAY: block; BACKGROUND: #fff; HEIGHT: 108px; BORDER-TOP: #b7c6d1 1px solid; BORDER-RIGHT: #b7c6d1 1px solid; PADDING-TOP: 3px
  40. }
  41. .blk_18 .ScrCont LI A:hover IMG {
  42. BORDER-BOTTOM-COLOR: #6c7f90; BORDER-TOP-COLOR: #6c7f90; BORDER-RIGHT-COLOR: #6c7f90; BORDER-LEFT-COLOR: #6c7f90
  43. }
  44. .blk_18 .ScrCont LI SPAN {
  45. TEXT-ALIGN: center; LINE-HEIGHT: 32px; DISPLAY: block; HEIGHT: 32px
  46. }
  47. .blk_18 .ScrCont LI A SPAN {
  48. COLOR: #333333; TEXT-DECORATION: none
  49. }
  50. .blk_18 .ScrCont LI A:hover SPAN {
  51. TEXT-DECORATION: underline
  52. }
  53. .blk_18 #List1_1 {
  54. FLOAT: left
  55. }
  56. .blk_18 #List2_1 {
  57. FLOAT: left
  58. }
  59. .blk_18 .LeftBotton {
  60. MARGIN-TOP: 25px; WIDTH: 12px; BACKGROUND: url(img/ui.gif) 30px -406px; FLOAT: left; HEIGHT: 70px
  61. }
  62. .blk_18 .RightBotton {
  63. MARGIN-TOP: 30px; WIDTH: 12px; BACKGROUND: url(img/ui.gif) 13px -406px; FLOAT: right; HEIGHT: 70px
  64. }
  65. .blk_18 .LeftBotton:hover {
  66. BACKGROUND: url(img/ui.gif) 64px -406px
  67. }
  68. .blk_18 .RightBotton:hover {
  69. BACKGROUND: url(img/ui.gif) 47px -406px
  70. }

  72. H2 {
  73. BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px
  74. }
  75. UL {
  76. BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px
  77. }
  78. LI {
  79. LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none
  80. }
复制代码

js代码：
  1. // JavaScript Document

  3. //图片滚动列表 mengjia 070927
  4. var Speed_1 = 10; //速度(毫秒)
  5. var Space_1 = 20; //每次移动(px)
  6. var PageWidth_1 = 184 * 5; //翻页宽度
  7. var interval_1 = 7000; //翻页间隔
  8. var fill_1 = 0; //整体移位
  9. var MoveLock_1 = false;
  10. var MoveTimeObj_1;
  11. var MoveWay_1="right";
  12. var Comp_1 = 0;
  13. var AutoPlayObj_1=null;
  14. function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
  15. function AutoPlay_1(){clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval('ISL_GoDown_1();ISL_StopDown_1();',interval_1)}
  16. function ISL_GoUp_1(){if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="left";MoveTimeObj_1=setInterval('ISL_ScrUp_1();',Speed_1);}
  17. function ISL_StopUp_1(){if(MoveWay_1 == "right"){return};clearInterval(MoveTimeObj_1);if((GetObj('ISL_Cont_1').scrollLeft-fill_1)%PageWidth_1!=0){Comp_1=fill_1-(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1);CompScr_1()}else{MoveLock_1=false}
  18. AutoPlay_1()}
  19. function ISL_ScrUp_1(){if(GetObj('ISL_Cont_1').scrollLeft<=0){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft+GetObj('List1_1').offsetWidth}
  20. GetObj('ISL_Cont_1').scrollLeft-=Space_1}
  21. function ISL_GoDown_1(){clearInterval(MoveTimeObj_1);if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="right";ISL_ScrDown_1();MoveTimeObj_1=setInterval('ISL_ScrDown_1()',Speed_1)}
  22. function ISL_StopDown_1(){if(MoveWay_1 == "left"){return};clearInterval(MoveTimeObj_1);if(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1-(fill_1>=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false}
  23. AutoPlay_1()}
  24. function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft>=GetObj('List1_1').scrollWidth){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth}
  25. GetObj('ISL_Cont_1').scrollLeft+=Space_1}
  26. function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return}
  27. var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)<PageWidth_1/2){TempSpace=Math.round(Math.abs(Comp_1/Space_1));if(TempSpace<1){TempSpace=1}}
  28. if(Comp_1<0){if(Comp_1<-TempSpace){Comp_1+=TempSpace;num=TempSpace}else{num=-Comp_1;Comp_1=0}
  29. GetObj('ISL_Cont_1').scrollLeft-=num;setTimeout('CompScr_1()',TempSpeed)}else{if(Comp_1>TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0}
  30. GetObj('ISL_Cont_1').scrollLeft+=num;setTimeout('CompScr_1()',TempSpeed)}}
  31. function picrun_ini(){
  32. GetObj("List2_1").innerHTML=GetObj("List1_1").innerHTML;
  33. GetObj('ISL_Cont_1').scrollLeft=fill_1>=0?fill_1:GetObj('List1_1').scrollWidth-Math.abs(fill_1);
  34. GetObj("ISL_Cont_1").onmouseover=function(){clearInterval(AutoPlayObj_1)}
  35. GetObj("ISL_Cont_1").onmouseout=function(){AutoPlay_1()}
  36. AutoPlay_1();
  37. }
  38. function startmarquee(elementID,h,n,speed,delay){
  39. var t = null;
  40. var box = '#' + elementID;
  41. $(box).hover(function(){
  42. clearInterval(t);
  43. }, function(){
  44. t = setInterval(start,delay);
  45. }).trigger('mouseout');
  46. function start(){
  47. $(box).children('ul:first').animate({marginTop: '-='+h},speed,function(){
  48. $(this).css({marginTop:'0'}).find('li').slice(0,n).appendTo(this);
  49. })
  50. }
  51. }
  52. //产品展示滚动图片结束
  53. //-->
复制代码

打包下载：
phpcms首页滚动图片代码.rar (220.69 KB, 下载次数: 453)


最好 phpcms 兼容性 图片
回复

使用道具 举报

全部评论0
返回列表 发新帖
回复
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

发布新帖

本文内容不够精彩，我要自己发布

TA的新帖

QQ|Archiver|手机版|小黑屋|管理员之家 ( 苏ICP备2023053177号-2 )

GMT+8, 2025-1-10 20:58 , Processed in 0.210437 second(s), 29 queries .

Powered by Discuz! X3.5

Cpoyright © 2001-2025 Discuz! Team