淘宝幻灯片特效

很经典的淘宝幻灯片特效，使用JavaScript而非Flash实现图片轮播，简单灵活通用。明晨网络Mingchennet.com在此处举例简要说明使用方法，文末提供打包下载。此代码使用了yahoo的js框架yui，比较臃肿，jquery应该也有实现这种特效的类的，有机会再找吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 
<title>无标题文档</title> 
<style type="text/css"> 
<!--  
/*指定幻灯片层外部容器宽度为120px*/  
#MainPromotionBanner{ width:120px;}  
#SlidePlayer{position:relative;margin:0 auto;}  
#SlidePlayer .Slides{  
    padding:0;  
    margin:0;  
    list-style:none;  
    /*指定幻灯片层的高度为50px*/  
    height:50px;  
    overflow:hidden;  
}  
 
/*指定幻灯片层中图片的宽度为120px，高度为50px*/  
#SlidePlayer .Slides li {float:left;width:120px;height:50px;}  
#SlidePlayer .Slides img{display:block;width:120px;height:50px;border:0;}  
#SlidePlayer .SlideTriggers{  
    position:absolute;  
    bottom:0;     
    right:0;  
    z-index:10;  
    margin:0;  
    padding:0;  
    list-style:none;  
    height:25px;  
}  
#SlidePlayer .SlideTriggers li{  
    float:left;  
    display:inline;  
    margin:3px;  
    width:16px;  
    height:16px;  
    color:#74a8ed;  
    text-align:center;  
    line-height:16px;  
    font-family:Arial;  
    font-size:.9em;  
    overflow:hidden;  
    cursor:pointer;  
    background:url(slide_trigger.gif) no-repeat center center;  
}  
#SlidePlayer .SlideTriggers li.Current{  
    margin:0 3px;  
    height:21px;  
    width:21px;  
    border:0;  
    color:#fff;  
    font-size:1.4em;  
    font-weight:bold;  
    line-height:21px;  
    background:url(slide_trigger_c.gif) no-repeat center center;  
}  
--> 
</style> 
</head> 
 
<body> 
 
 
<div id="MainPromotionBanner"> 
<div id="SlidePlayer"> 
  <ul class="Slides"> 
    <li><a target="_blank" href="http://www.mingchennet.com"><img src="http://www.mingchennet.com/templets/images/top-logo.gif" /></a></li> 
    <li><a target="_blank" href="http://www.qdseek.com"><img src="http://qdseek.com/images/qdseek_com_ico.gif" /></a></li> 
    <li><a target="_blank" href="http://www.baidu.com"><img src="http://www.baidu.com/img/logo-yy.gif" /></a></li> 
    <li><a target="_blank" href="http://g.cn"><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" /></a></li> 
  </ul> 
</div> 
<script type="text/javascript" src="yui.js"></script> 
<script type="text/javascript" src="tb_slide.js"></script> 
<script type="text/javascript">         TB.widget.SimpleSlide.decoration('SlidePlayer', {eventType:'mouse', effect:'scroll'});  
</script> 
</div> 
 
 
</body> 
</html>

淘宝幻灯片特效演示代码

(责任编辑：admin)

明晨网络

搜索

热门标签

淘宝幻灯片特效