God is not home today

首頁 | 網路廣播電台 | 網誌聯播 | 商品推薦

將ECSHOP的首頁主廣告輪播替換為CSS+JS

效果如下圖:

1.將以下代碼存為form_css-js.js

/* Flash首頁主廣告輪播替換為Js輪播 - www.blake.tw */

var glide =new function(){
function $id(id){return document.getElementById(id);};
this.layerGlide=function(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point){
  var oSubLi = $id(oEventCont).getElementsByTagName('li');
  var interval,timeout,oslideRange;
  var time=1; 
  var speed = fSpeed 
  var sum = oSubLi.length;
  var a=0;
  var delay=second * 1000; 
  var setValLeft=function(s){
   return function(){
    oslideRange = Math.abs(parseInt($id(oSlider).style[point])); 
    $id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';  
    if(oslideRange==[(sSingleSize * s)]){
     clearInterval(interval);
     a=s;
    }
   }
  };

  var setValRight=function(s){
   return function(){   
    oslideRange = Math.abs(parseInt($id(oSlider).style[point]));       
    $id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
    if(oslideRange==[(sSingleSize * s)]){
     clearInterval(interval);
     a=s;
    }
   }
  }

  function autoGlide(){
   for(var c=0;c<sum;c++){oSubLi1.className='';};
   clearTimeout(interval);
   if(a==(parseInt(sum)-1)){
    for(var c=0;c<sum;c++){oSubLi1.className='';};
    a=0;
    oSubLi[a].className="active";
    interval = setInterval(setValLeft(a),time);
    timeout = setTimeout(autoGlide,delay);
   }else{
    a++;
    oSubLi[a].className="active";
    interval = setInterval(setValRight(a),time); 
    timeout = setTimeout(autoGlide,delay);
   }
  }

  if(auto){timeout = setTimeout(autoGlide,delay);};
  for(var i=0;i<sum;i++){ 
   oSubLi[i].onmouseover = (function(i){
    return function(){
     for(var c=0;c<sum;c++){oSubLi1.className='';};
     clearTimeout(timeout);
     clearInterval(interval);
     oSubLi[i].className="active";
     if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){
      interval = setInterval(setValLeft(i),time);
      this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
     }else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){
       interval = setInterval(setValRight(i),time);
      this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
     }
    }
   })(i)   
  }
}
}
glide.layerGlide(true,'icon_num','show_pic',710,3,0.1,'left');/*5是輪播速度設置*/

2.後台管理>首頁主廣告管理>自定義  功能內,插入以下代碼,廣告類型選擇[代碼]:

<script src="js/form_css-js.js" type=text/javascript></script>

3.打開index.php,在大約164行找到

$smarty->display('index.dwt', $cache_id);

在此行下面插入

function get_flash_xml() 
{ 
    $flashdb = array(); 
    if (file_exists(ROOT_PATH . DATA_DIR . '/flash_data.xml')) 
    { 

        // 相容v2.7.0及以前版本 
        if (!preg_match_all('/item_url="([^"]+)"\slink="([^"]+)"\stext="([^"]*)"\ssort="([^"]*)"/', file_get_contents(ROOT_PATH . DATA_DIR . '/flash_data.xml'), $t, PREG_SET_ORDER)) 
        { 
            preg_match_all('/item_url="([^"]+)"\slink="([^"]+)"\stext="([^"]*)"/', file_get_contents(ROOT_PATH . DATA_DIR . '/flash_data.xml'), $t, PREG_SET_ORDER); 
        } 

        if (!empty($t)) 
        { 
            foreach ($t as $key => $val) 
            { 
                $val[4] = isset($val[4]) ? $val[4] : 0; 
                $flashdb[] = array('src'=>$val[1],'url'=>$val[2],'text'=>$val[3],'sort'=>$val[4]); 
            } 
        } 
    } 
    return $flashdb; 
}

4.同樣index.php,在大約129行找到

$smarty->assign('auction_list',    index_get_auction()); // 拍賣活動

在此行下面插入:

$smarty->assign('playerdb',        get_flash_xml()); // CSS+JS廣告輪播

5.打開/themes/使用中模版/library/index_ad.lbi,將內容全部刪除,然後將下列代碼插入:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- {if $index_ad eq 'sys'} --> 
<script type="text/javascript"> 
var swf_width=710; 
var swf_height=260; 
</script> 
<script type="text/javascript" src="data/flashdata/{$flash_theme}/cycle_image.js"></script> 
<!-- {elseif $index_ad eq 'cus'} --> 
<!-- {if $ad.ad_type eq 0} --> 
<a href="{$ad.url}"><img src="{$ad.content}" width="710" height="260" border="0" /></a> 
<!-- {elseif $ad.ad_type eq 1} --> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="710" height="260"> 
<param name="movie" value="{$ad.content}" /> 
<param name="quality" value="high" /> 
<embed src="{$ad.content}" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="710" height="260"></embed> 
</object> 
<!-- {elseif $ad.ad_type eq 2} --> 
<div id="picBox"> 
<ul id="show_pic" style="left:0;"> 
{foreach from=$playerdb item=item key=key} 
<li><a href="{$item.url}"><img src="{$item.src}"/></a></li> 
{/foreach} 
</ul> 
</div>
<div id="picBox1"> 
<ul id="icon_num"> 
{foreach from=$playerdb item=item name=picsitem key=key} 
<li <!--{if $smarty.foreach.picsitem.iteration eq 1}-->class="active" <!--{/if}-->>{$item.text|truncate:7}</li>
{/foreach} 
</ul> 
</div>
{$ad.content} 
<!-- {elseif $ad.ad_type eq 3} --> 
<a href="{$ad.url}">{$ad.content}</a> 
<!-- {/if} --> 
<!-- {else} --> 
<!-- {/if} -->

6.打開/themes/使用中模版/style.css,在最下面插入以下代碼:

/* Flash首頁主廣告輪播替換為Js輪播 - www.blake.tw */
#picBox{width:710px; height:260px; overflow:hidden; position:relative; z-index:999;border:0px solid #CCCCCC;}
#picBox1{width:710px; height:30px; overflow:hidden; position:relative; z-index:999;border:0px solid #CCCCCC;}
#picBox ul#show_pic{height:260px; width:3550px; position:absolute;}
#picBox ul#show_pic li{ float:left; height:260px;}
#picBox ul#show_pic li img{ display:block; width:710px;height:260px}
#icon_num{ position:absolute; bottom:0px; left:0px;width:710px; height: 30px; overflow:hidden; padding-right:0px;}
#icon_num li {float:left;background:#cccccc;filter:alpha(opacity=80); /* IE 透明度20% */-moz-opacity:0.8; /* Moz FF 透明度10%*/opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)透明度10%*/ font-weight:bold;color:#777; border:1px #ccc solid;cursor:pointer;width:140px; line-height:30px;text-align:center; font-size:13px; background:#cccccc;}
#icon_num li:hover,#icon_num li.active{background:url(images/tab_arrow_down.gif) #7d7d7d no-repeat center -1px; color:#fff; text-align:center}
/*end*/

完成收工

Tags: , , , , , , , , ,

發佈日期: 2012年03月04日 星期日 | 文章分類:ECSHOP | 訂閱這篇文章:RSS 2.0
Both comments and pings are currently closed.

15 Responses to “將ECSHOP的首頁主廣告輪播替換為CSS+JS”

  1. Christopher Says:

    I stumbled upon your site today and found so much interesting stuff here! Now I am definitely encouraged to share it with my friends! Hope they will like it the same! Enjoy everybody!

  2. Connor Says:

    One more perfect website for everyone interested in your theme! So many information, nice pictures and good comments! All this in one place? Unbelievable!!! I?ll definitely have to share with my entire friends list! Cheers

  3. Jessica Says:

    Pretty good post you have here. I decided to stumble upon your blog and just wanted to tell you that I really enjoy reading your posts. Anyway I will be subscribing to your feed and I hope you post again soon. Thanks!

  4. Grace Says:

    Keep ‘em coming… you all do such a great job at such Concepts… can’t tell you how much I, for one appreciate all you do!

  5. Brandon Says:

    Thank you for your posts and for what you are doing here! Admirable work and much success in your business dealings! Please excuse my poor English as it is not my first tongue.

  6. Joshua Says:

    A good read and thoughtful insights in simple but great articles!

  7. Hannah Says:

    I adore blogs and yours is really something different! I like your thoughts on this blog!

  8. Rachel Says:

    Your site was the first in search for my keywords and it totally deserves the first place! Thanks for your work and I wish you success!

  9. Melanie Says:

    I stumbled upon your site today and found so much interesting stuff here! Now I am definitely encouraged to share it with my friends! Hope they will like it the same! Enjoy everybody!

  10. 凱文 Says:

    請問下,照您方式安裝於2.72版後,圖片無法動作
    請大大指導一下方向~~@@

  11. Blake Says:

    方便給我網址看一下你修改後的效果嗎?
    或是描述一下無法動作的詳細情況

  12. Blake Says:

    猜測可能是第一步跟第二步的地方有問題,在第一部把那些代碼存成form_css-js.js之後,視您存放的位置為何,在第二部的這一段也要跟著您存放的路徑調整,像我是放在根目錄下的js目錄裡,所以我的語法是src="js/form_css-js.js"

  13. 凱文 Says:

    感謝!來試試~

  14. 凱文 Says:

    BLAKE大大
    測試完後~~
    http://29565220.com/
    不會自動跳轉!!感恩^^

  15. Blake Says:

    看起來應該是JS的路徑設定錯了導致JS沒有作用的關係,看看步驟二的插入代碼那邊,路徑的設定跟您實際儲存步驟一form_css-js.js的檔案路徑有沒有一致