将ECSHOP的首页主广告轮播替换为CSS+JS,最模板方法一
2016-09-07 22:02 来源:www.chinab4c.com 作者:ecshop专家
效果如下图:
1.将以下代码存为form_css-js.js
/* Flash首页主广告轮播替换为Js轮播 - www.zuimoban.com */
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>
(责任编辑:chinab4c) |
最近更新
常用插件
- ecshop2.7.1邮件发送插件
ecshop2.7.1邮件发送插件:该插件主要的开发思想是源于ecshop短信发送系统...
- ecshop二次开发商品购买增
图片1香...
- ecshop最小购买数量控制插
ecshop最小购买数量控制插件,这个插件主要是为我们提供一个十分方便...
- ecshop没登陆情况下订单查
ecshop没登陆情况下订单查询插件,主要是针对ecshop在没有登陆的情况下...
- ecshop2.7.2生成虚拟订单2.
以前我们开发过ecshop下的虚拟订单,就是客户在访问的时候,会自动生...
ecshop热门问答
ecshop热门资料
ecshop货到付款
ecshop创业
ecshop在线咨询
ecshop相片
ecshop在线人数
ecshop垃圾
ecshop阿里妈妈
ecshopcls_session
ecshop2011
ecshoplamiu
ecshopwholesale
ecshop商品相册
ecshop谷歌重复收录
ecshopnewred
ecshopapmserv
ecshop锁定
ecshop自定义等级类型
ecshop滑动
ecshop滚动条
ecshopLive
ecshop不方便
ecshopfirst
ecshoprabbitmq
ecshop电子设备
ecshop美国VPS
ecshopcps
ecshop订单中心
ecshop欢迎
ecshopyoutube
ecshop百团大战