客服热线:189-2701-5231
登录注册

提取紫气东来的代码在其他模板上做左右滚动商品展示 详解

发布日期:2012-09-20

一:打开紫气东来模板index.html ,复制里面一段js。
    说明:itemsWrapLength=elmaskLengh/6;  这里6是指滚动一行显示多少个商品
          var MyInterval=setInterval("slidergoodsOnTime()",3000);    3000 指的是滚动速度。

《也可以直接复制以下js放到index.html里面》  
<script>
try{
if($ES('#slidergoods')){
    var elmaskLengh=$('slidergoods').getSize().x;
    itemsWrapLength=elmaskLengh/6;
    $ES('#slidergoods .GoodsListWrap .itemsWrap').setStyle('width',itemsWrapLength);
    $E('#slidergoods .GoodsListWrap').setStyle('width',itemsWrapLength*$ES('#slidergoods .GoodsListWrap .itemsWrap').length+10);
    var sliderSize=0;
    function slidergoodsOnTime(){
        if(!$E('#slidergoods .GoodsListWrap') || !$E('#slidergoods .GoodsListWrap .itemsWrap')) return false;
        sliderSize=sliderSize-$E('#slidergoods .GoodsListWrap .itemsWrap').getSize().x;
        elmainLengh=$E('#slidergoods .GoodsListWrap').getSize().x;
        overflowLength=elmainLengh-elmaskLengh;
        if(sliderSize>-overflowLength){
            $E('#slidergoods .GoodsListWrap').tween('left', sliderSize);
        }
        else{
            $E('#slidergoods .GoodsListWrap').tween('left', 0);    
            sliderSize=0;    
        }
    }
   var MyInterval=setInterval("slidergoodsOnTime()",3000);    
}
}catch(e){}
</script>

二:添加一个widgets
  <div id="slidergoods"><{widgets id="slidergoods"}> </div>
三:写css。
#slidergoods{position:relative; height:160px; width:700px;overflow:hidden; border:1px solid #ccc;  }
#slidergoods .GoodsListWrap{ width:1180px; position:absolute; left:0; top:0;height:152px;}
#slidergoods .GoodsListWrap .itemsWrap .item{ padding-right:10px;  border-right:1px dotted #ccc;}

四:可视化编辑添加多功能商品展示,设置商品列多于 itemsWrapLength=elmaskLengh/6; 的6 (如果是6那必须设置7才会滚动)    

已近说得很明白了吧,css根据自己需要改就行了。

工作时间:早9:00—晚上21:00   24H售后:13829351575  服务QQ:292480793  392478192  售后技术QQ:156461982
地址:广东河源市龙川新城开发区5号小区 龙川商耀网络科技有限公司 备案号:粤ICP备15012952号-1
Copyright © 2005-2015 (www.shopsy.cn) All Rights Reserved
在线时间
9:00-22:00