Chinaunix首页 | 论坛 | 博客
  • 博客访问: 80260
  • 博文数量: 22
  • 博客积分: 486
  • 博客等级: 下士
  • 技术积分: 225
  • 用 户 组: 普通用户
  • 注册时间: 2011-07-15 21:30
文章分类

全部博文(22)

文章存档

2013年(2)

2012年(4)

2011年(16)

分类: 系统运维

2011-09-24 15:49:00

本例利用ecshop内置的广告位置和广告列表,在任意页面输出自定义轮播广告。
前提:因内置Flash主广告只能有一个,不能在不同的页面调用不同的Flash广告,另外调用内置广告的方法,网上有很多,但没有一个方法把轮播说清楚了的,大部分都只能实现调用出一个图片广告。
首先需要一个js轮播的界面,这个就不多说了,网上很多。我用的懒人图库的。js附件在最下面打包了。
模板中代码片段如下:
  1. <div class="lanrentukubox">
  2.                         
  3.                     <DIV id=newsSlider>
  4.                         <DIV class=container>
  5.                             <UL class=slides>
  6.                              
  7.                               <LI><A href="{$ad.ad_link}"
  8.                               target=_blank><IMG src="data/afficheimg/{$ad.ad_code}"></A>
  9.                                </LI>
  10.                              
  11.                              </UL>
  12.                           </DIV>
  13.                             <DIV class=validate_Slider></DIV>
  14.                             <UL class=pagination>
  15.                                
  16.                               <LI><A href="{$ad.ad_link}">0{$ad.id}</A> </LI>

  17.                                  
  18.                              </UL>
  19.                     </DIV>
  20.                         
  21. </div>
forcach循环中的$cat_ads是我在php页面自定义的,数组内ad_link(广告链接)、ad_code(广告图片)这2个是ecshop数据库定义的字段。id是我定义的,需要在轮播中显示编号,之前开始用的ad_id,但是考虑到如果后期广告更换多了之后ad_id是一个自增变量,故只能自定义一个。
下面是。
php文件中代码片段:

  1. $cat_ads = $db->getAll("SELECT ad_id,ad_link,ad_code FROM ". $ecs->table("ad") ."where position_id=1");
  2. //$a = print_r($cat_ads);
  3. if(!empty($cat_ads))
  4. {
  5.     $cat_ads_array = array();
  6.     $i=0;
  7.     foreach($cat_ads as $key)
  8.     {
  9.          $i+=1;
  10.         $cat_ads_array[] = array('id'=>$i,'ad_id'=>$key['ad_id'],'ad_link'=>$key['ad_link'],'ad_code'=>$key['ad_code']);
  11.     }
  12.     
  13.     $smarty->assign('cat_ads',$cat_ads_array);
  14. }
注意代码中sql语句中条件,这个就是你要显示的广告位,根据需要修改。
自此,大功告成。



下面是css代码:
  1. IMG {
  2.     BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px
  3. }
  4. .lanrentukubox{margin:0px auto;WIDTH: 345px; HEIGHT: 115px;}

  5. #newsSlider {
  6.     POSITION: absolute; WIDTH: 345px; HEIGHT: 115px; CLEAR: both;
  7. }
  8. * HTML #newsSlider {
  9.     POSITION: absolute; WIDTH: 345px; HEIGHT: 115px; CLEAR: both;
  10. }

  11. /* 416=>345 243=>115*/
  12. #newsSlider .container {
  13.     POSITION: relative; MARGIN-TOP: 15px; WIDTH: 345px; HEIGHT: 115px; OVERFLOW: hidden
  14. }
  15. #newsSlider .container IMG {
  16.     WIDTH: 345px; HEIGHT: 115px
  17. }
  18. #newsSlider DIV.slides {
  19.     POSITION: absolute; TOP: 0px; LEFT: 0px
  20. }
  21. #newsSlider UL.slides {
  22.     POSITION: absolute; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px; LEFT: 0px
  23. }
  24. #newsSlider UL.slides DL {
  25.     WIDTH: 584px; FLOAT: left; HEIGHT: 43px; PADDING-TOP: 3px
  26. }
  27. #newsSlider UL.slides DT {
  28.     LINE-HEIGHT: 18px; WIDTH: 400px; FLOAT: left; HEIGHT: 39px; COLOR: #777777; MARGIN-LEFT: 3px
  29. }
  30. #newsSlider UL.slides DT A {
  31.     COLOR: #777777; FONT-SIZE: 12px
  32. }
  33. #newsSlider UL.slides DD {
  34.     TEXT-ALIGN: center; LINE-HEIGHT: 18px; WIDTH: 180px; FONT-FAMILY: "黑体"; FLOAT: left; HEIGHT: 39px; COLOR: #333333; FONT-SIZE: 16px
  35. }
  36. #newsSlider UL.slides DD A {
  37.     FONT-FAMILY: "黑体"; COLOR: #333; FONT-SIZE: 16px; TEXT-DECORATION: none
  38. }
  39. #newsSlider UL.slides DD .more {
  40.     MARGIN-TOP: -22px; WIDTH: 54px; FLOAT: right; HEIGHT: 16px; COLOR: #2a609f; FONT-SIZE: 12px; OVERFLOW: hidden
  41. }
  42. #newsSlider UL.slides DD .more A {
  43.     COLOR: #2a609f
  44. }
  45. #newsSlider DIV.slides DIV {
  46.     POSITION: absolute; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 584px; PADDING-RIGHT: 0px; DISPLAY: none; TOP: 0px; PADDING-TOP: 0px
  47. }
  48. #newsSlider #loopedSlider {
  49.     POSITION: relative; MARGIN: 0px auto; WIDTH: 345px; CLEAR: both
  50. }
  51. *+html #newsSlider UL.pagination {/*IE7*/
  52.    POSITION: absolute; BOTTOM: 80px; RIGHT: 0px; _bottom: -25px;margin-right:4px;
  53. }
  54. *html #newsSlider UL.pagination {/*IE6*/
  55.    POSITION: absolute; BOTTOM: 96px; RIGHT: 0px;
  56. }
  57. #newsSlider UL.pagination {
  58.     POSITION: absolute; BOTTOM: 82px; RIGHT: 0px; _bottom: -25px;margin-right:4px;
  59. }
  60. #newsSlider UL.pagination LI {
  61.     TEXT-ALIGN: center; WIDTH: 30px; FLOAT: left; HEIGHT: 18px; padding-RIGHT: 0px;list-style:none;
  62. }
  63. *html #newsSlider UL.pagination LI {/*ie6*/
  64.     TEXT-ALIGN: center; WIDTH: 30px; FLOAT: left; HEIGHT: 18px;list-style:none;margin-right:-2px;
  65. }
  66. #newsSlider UL.pagination LI A {
  67.     TEXT-ALIGN: center; LINE-HEIGHT: 18px; WIDTH: 30px; FONT-FAMILY: "宋体";BACKGROUND:#C00032; FLOAT: left; HEIGHT: 18px; COLOR: #FFF; FONT-SIZE: 12px; FONT-WEIGHT: normal; MARGIN-RIGHT: 2px; TEXT-DECORATION: none;
  68. }
  69. #newsSlider UL.pagination LI.active A {
  70.     TEXT-ALIGN: center; LINE-HEIGHT: 18px; WIDTH: 30px; FONT-FAMILY: "宋体"; BACKGROUND:#C00032; FLOAT: left; HEIGHT: 18px; COLOR: #000000; FONT-SIZE: 12px; FONT-WEIGHT: normal; MARGIN-RIGHT: 2px; TEXT-DECORATION: none;
  71. }
  72. UL.pagination LI A:hover {
  73.     TEXT-ALIGN: left; LINE-HEIGHT: 18px; WIDTH: 30px; FONT-FAMILY: "宋体"; BACKGROUND:#C00032;FLOAT: left; HEIGHT: 18px; COLOR: #ffffff; FONT-SIZE: 12px; FONT-WEIGHT: normal; MARGIN-RIGHT: 2px; TEXT-DECORATION: none
  74. }


  75. *HTML #newsSlider UL.pagination LI A {
  76.     TEXT-ALIGN: center; LINE-HEIGHT: 18px; WIDTH: 30px; FONT-FAMILY: "宋体"; BACKGROUND:#C00032; FLOAT: left; HEIGHT: 18px; COLOR: #ffffff; FONT-SIZE: 12px; FONT-WEIGHT: normal;TEXT-DECORATION: none;
  77. }
  78. *HTML #newsSlider UL.pagination LI.active A {
  79.     TEXT-ALIGN: center; LINE-HEIGHT: 18px; WIDTH: 30px; FONT-FAMILY: "宋体"; BACKGROUND:#C00032; FLOAT: left; HEIGHT: 18px; COLOR: #000000; FONT-SIZE: 12px; FONT-WEIGHT: normal; TEXT-DECORATION: none;
  80. }
  81. *HTML UL.pagination LI A:hover {
  82.     TEXT-ALIGN: left; LINE-HEIGHT: 18px; WIDTH: 30px; FONT-FAMILY: "宋体"; BACKGROUND:#C00032;FLOAT: left; HEIGHT: 18px; COLOR: #000000; FONT-SIZE: 12px; FONT-WEIGHT: normal; TEXT-DECORATION: none
  83. }
 js.zip  

阅读(1370) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~