这是梅子从网上找的店铺装修幻灯片代码，我没有使用过不知道有没有效果，因为看到有的淘友需要多图走马灯模板的代码就找了一段，普通的促销模板教程描述模板制作等相关的教程太多了，都已经学的差不多了。

现在特别想学习一下怎样在促销模板中制作多图走马灯，我想一定会有很多人想要学习的！

声明：多图走马灯不是多个图片左右或上下移动那种，是在一个窗口变换不同的图片那种。

<p><style type="text/css">
#focus_m{position:relative; width:738px; height:384px; background:#0A2F6F}
.f_img_roll{width:350px; height:300px; position:relative;}
.f_img_roll img{position:absolute; left:0; top:0; width:660px; height:300px;}
.f_img_tree{position:absolute; width:75px; height:300px; right:3px; top:0;}
.f_img_tree div{position:absolute; z-index:300; top:3px; right:0; width:75px; height:47px; background:url([img]http://www.onlybao.cn/6yue/mask.gif[/img]) no-repeat;}
.f_img_tree ul{margin:0; padding:0; list-style:none; position:absolute; right:0;}
.f_img_tree li{width:60px; height:45px; border:1px solid #0066cc; margin-top:3px;}
.f_img_tree img{width:54px; height:39px; border:3px solid #000066; vertical-align:top;}
.f_con{color:#fff; height:70px;}
.f_con .title{font-size:14px; height:30px; line-height:30px; margin-top:5px; font-weight:bold; text-align:center;}
.f_con .title a:link, .f_con .title a:visited{color:#fff; text-decoration:none} copyright taoqao.com
.f_con .title a:hover{text-decoration:underline}
.f_con .con{font-size:12px; padding:0 10px; height:40px; line-height:150%;}
</style></p>
<script type="text/javascript">
function $A(iterable) {
var results = [];
for (var i = 0; i < iterable.length; i++)results.push(iterable[i]);
return results;
}
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}
var imgs = [
{max:'http://www.onlybao.cn/jinbao/1.jpg', min:'http://www.onlybao.cn/jinbao/1.jpg', url:'http://item.jinbao.com/354/354965.htm', title:'EDUP 小战卡 WIFI EP-6501 rt2571/rt73芯片 无线网卡', con:'EDUP 与 台湾雷凌公司 强强联手 重金打造 EDUP战卡系列。采用目前 ralink主流芯片 rt25xx rt73.超稳定 注入快的特点 续写小战卡EDUP WIFI EP-6501 USB带天线无线网卡神话传奇。'},
{max:'http://www.onlybao.cn/jinbao/2.jpg', min:'http://www.onlybao.cn/jinbao/2.jpg', url:'http://item.jinbao.com/367/367225.htm', title:'Actiontec GT701-WG 54M无线路由', con:'质保一年，中文设置界面，所有配件一应俱全，价格优惠，大家不要错过！'},

{max:'http://www.onlybao.cn/jinbao/3.jpg', min:'http://www.onlybao.cn/jinbao/3.jpg', url:'/', title:'EDUP无线网络产品', con:'EDUP 创立于 2002 年 一直做国外的外销 在国外已经建立了良好的口碑 于2005年 在国内 首先推出 支持PSP/NDS 游戏 神卡系列的网卡 畅销国内 曾在当时创出100K 的销售记录'},
{max:'http://www.onlybao.cn/jinbao/1.jpg', min:'http://www.onlybao.cn/jinbao/1.jpg', url:'http://item.jinbao.com/354/354965.htm', title:'EDUP 小战卡 WIFI EP-6501 rt2571/rt73芯片 无线网卡', con:'EDUP 与 台湾雷凌公司 强强联手 重金打造 EDUP战卡系列。采用目前 ralink主流芯片 rt25xx rt73.超稳定 注入快的特点 续写小战卡EDUP WIFI EP-6501 USB带天线无线网卡神话传奇。'},
{max:'http://www.onlybao.cn/jinbao/2.jpg', min:'http://www.onlybao.cn/jinbao/2.jpg', url:'http://item.jinbao.com/367/367225.htm', title:'Actiontec GT701-WG 54M无线路由', con:'质保一年，中文设置界面，所有配件一应俱全，价格优惠，大家不要错过！'},
{max:'http://www.onlybao.cn/jinbao/3.jpg', min:'http://www.onlybao.cn/jinbao/3.jpg', url:'/', title:'EDUP无线网络产品', con:'EDUP 创立于 2002 年 一直做国外的外销 在国外已经建立了良好的口碑 于2005年 在国内 首先推出 支持PSP/NDS 游戏 神卡系列的网卡 畅销国内 曾在当时创出100K 的销售记录'}
];
function Focus(){ this.initialize.apply(this, arguments) };
Focus.prototype = {
initialize: function(imgObj, focus, tim, speed){
this.imgs= imgObj;
this.tim= tim*1000||2000;
this.speed= speed||0.3;
this.img_m= null;// 大图
this.img_m2= null;// 大图2
this.lis= [];// 小图列表
this.mask= null;// 蒙板
this.title= null; // 标题
this.con= null;// 内容
this.cur= 0;// 当前位置
this.t= null; // 整体计时
this.tm= null;// mask位置
this.ti= null;// img 切换
this.stoped= true;// 停止状态
this.tem= 0;// 临时数据
this.loaded= {imgs:[], num:0};// 加载进度
this.getElement(document.getElementById(focus));
this.preload();
},
preload: function(){
for(var i=0; i<this.imgs.length; i++){
this.loaded.imgs[i]= new Image();
this.loaded.imgs[i].onload= this.load_num.bind(this);
this.loaded.imgs[i].src= this.imgs[i].max;
}
},
load_num: function(){
this.loaded.num++;
if(this.loaded.num == this.imgs.length)
this.start();
},
getElement: function(focus){ // 获得蒙板，小图列表，标题/内容容器等。。。
var ds = focus.getElementsByTagName('div');
for(var i=0; i<ds.length; i++)
switch(ds[i].className){
case 'f_img_roll':
this.img_m = document.createElement('img');
this.img_m2 = document.createElement('img');
this.img_m.src = this.imgs[0].max;
this.img_m.style.zIndex = 101;
this.img_m2.style.zIndex= 100;
ds[i].onmouseover = this.stop.bind(this);
ds[i].onmouseout = this.start.bind(this);
ds[i].appendChild(this.img_m);
ds[i].appendChild(this.img_m2);

case 'f_img_tree':
this.mask = document.createElement('div');
this.mask.onmouseover = this.stop.bind(this);
this.mask.onmouseout = this.start.bind(this);
var ul = document.createElement('ul');
var oThis = this;
for(var n=0; n<this.imgs.length; n++){
this.lis[n] = document.createElement('li');
this.lis[n].n = n;
this.lis[n].innerHTML= '<img src="'+this.imgs[n].min+'" />';
this.lis[n].onmouseover= function(){ this.style.border = "1px solid #cc0000"; }
this.lis[n].onmouseout= function(){ this.style.border = "1px solid #0066cc"; }
this.lis[n].onclick = function(){ if(oThis.lis[oThis.cur]!= this) oThis.nextFrame.call(oThis, this.n); }
ul.appendChild(this.lis[n]);
};
ds[i].appendChild (this.mask);
ds[i].appendChild (ul);
break;
case 'title':
this.title = ds[i];
this.title.innerHTML = this.imgs[0].title;
this.title.parentNode.onmouseover= this.stop.bind(this);
this.title.parentNode.onmouseout= this.start.bind(this);
break;
case 'con':
this.con = ds[i];
this.con.innerHTML = this.imgs[0].con;
break;
}
},nextFrame: function(n){
if(this.t)clearTimeout(this.t);
if(this.tm)clearInterval(this.tm);

if(this.ti)clearInterval(this.ti);
if(n)this.cur = n-1;
var top = 0, posTo = 0;
if(n!=0 && this.imgs[this.cur+1]){
posTo = this.lis[this.cur+1].offsetTop;
this.cur = this.cur+1;
}else{
posTo = this.lis[0].offsetTop;
this.cur = 0;
}
this.tem = this.mask.offsetTop;
this.tem > posTo? top = 1 : top = 0;
this.tm = setInterval(this.moveTo.bind(this, top, posTo), 25);
},moveTo: function(top, posTo){
if(!top){
if((this.tem+2) >= posTo+1){
clearInterval(this.tm);
this.mask.style.top = posTo+'px';
this.img_swap();
return;
}
this.tem += (posTo - this.tem) * this.speed
}else{
if((this.tem-2) <= posTo-1){
clearInterval(this.tm);
this.mask.style.top = posTo+'px';
this.img_swap();
return;
}
this.tem -= (this.tem-posTo)*this.speed;
}
this.mask.style.top = this.tem+'px';
},
img_swap: function(){
var t, b;
if(this.img_m.style.zIndex > this.img_m2.style.zIndex){
t = this.img_m;
b = this.img_m2;
}else{
t = this.img_m2;
b = this.img_m;
}
this.title.innerHTML= '<a href="'+this.imgs[this.cur].url+'">'+this.imgs[this.cur].title+'</a>';
this.con.innerHTML= this.imgs[this.cur].con;
b.src = this.imgs[this.cur].max;
/MSIE/.test(navigator.userAgent) ?
this.tem = t.style.filter ? t.style.filter.replace(/^.+=(d+).+$/,'$1') : 100
: this.tem = t.style.opacity ? t.style.opacity*100 : 100;
if(this.ti)clearInterval(this.ti);
this.ti= setInterval(this.img_hid.bind(this, t, b), 25);
},
img_hid: function(t,b){
this.tem -= 7;
if (/MSIE/.test(navigator.userAgent))
t.style.filter= 'alpha(opacity='+this.tem+')';
else
t.style.opacity = this.tem/100;
if(this.tem <=0){
clearInterval(this.ti);
var tz= t.style.zIndex;
var bz= b.style.zIndex;

t.style.zIndex= bz
b.style.zIndex= tz;
if (/MSIE/.test(navigator.userAgent))
t.style.filter= 'alpha(opacity=100)';
else
t.style.opacity= 1;
if(this.stoped) return;
this.start(); // 继续循环
}
},
start: function(){
if(this.t) clearTimeout(this.t);
this.t= setTimeout(this.nextFrame.bind(this, null), this.tim);
this.stoped = false;
},
stop: function(){
clearTimeout(this.t);
this.stoped = true;
}
}
window.onload = function(){
var focus = new Focus(imgs,'focus_m');
//focus.start();
}
</script>
<div id="focus_m">
<div class="f_img_roll"> </div>
<div class="f_img_tree"> </div>
<div class="f_con">
<div class="title"> </div>
<div class="con"> </div>
</div>
</div>
自己修改对应的产品链接和图片地址，不能保证任何版本的旺铺都可以使用。

• 淘宝网店怎么给买家发货？卖家发货流程指南
• 网店转型 请到工商部门登记征税
• 如何提高网店转化率？
• 全美25万网店瞄准中国制造
• 6大网店免费推广技巧
• 女装实体店遭遇网店PK 网店年销售额超千万
• 淘宝店铺宣传语 淘宝新网店开张宣传语
• 如何有效宣传淘宝网店？有效的宣传方法离不开好的货源和服务
• 淘宝网店策划营销推广方案

来顶一下

返回首页

• 你我的故事 店长网期刊正式发布
• 店长网支持“店长合作加盟等信息发布”
• 店长网引进合作伙伴：淘宝帮家宝
• 活动：成功采访一篇 送店长网广告位一周
• 新增淘宝客的栏目 淘宝客的30个常见问题
• 隆重推出《店长网系列之淘宝店长创业100天(上)》

• 如何设置淘宝旺铺背景图片？淘宝店铺背景怎么
• 如何做店铺收藏链接!超多图,详细讲解!
• 教新手怎样做淘宝店铺滚动图片、公告
• 普通店铺/新卖家/如何装修宝贝分类栏
• 淘宝店标尺寸 自己动手做店标
• 淘宝店铺装修之制作自定义模块教程
• 如何制作Flash模板？
• 淘宝旺铺装修总结（店招、促销区、分类图标、
• 淘宝店招设计怎么做？
• 淘宝图片如何添加水印