效果图如下：
<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 211.5pt; HEIGHT: 162pt" type="#_x0000_t75"><imagedata o:title="taobaoResult" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.jpg"></imagedata></shape>
代码如下:(主要部分)
第一步：
TaobaoSlidesEffect.htm
<TITLE>淘宝网幻灯片效果</TITLE>
<link href="images/SlidePlayer.css" rel="stylesheet" type="text/css">
<SCRIPT src="Images/yui-utilities.js" type=text/javascript></SCRIPT>
<SCRIPT src="Images/tbra.js" type=text/javascript></SCRIPT>
<body>
<DIV id=MainPromotionBanner>
<DIV id=SlidePlayer>
<UL class=Slides>
<LI><img src="Images/s1.jpg"></LI>
<LI><img src="Images/s2.jpg"></LI>
<LI><img src="Images/s3.jpg"></LI>
<LI><img src="Images/s4.jpg"></LI>
<LI><img src="Images/s5.jpg"></LI>
<LI><img src="Images/s6.jpg"></LI>
<LI><img src="Images/s7.jpg"></LI>
<LI><img src="Images/s8.jpg"></LI>
</UL>
</DIV>
</DIV>
<SCRIPT type=text/javascript>
TB.widget.SimpleSlide.decorate('SlidePlayer', {eventType:'mouse', effect:'scroll'});
</SCRIPT>
</body>
第二步：
SlidePlayer.css
/***第一部分***/
* { margin: 0px; padding: 0px; }
body {
font-family: "宋体";
font-size: 12px;
text-decoration: none;
margin-top: 20px;
margin-left: 20px;
color: #666666;
}
/***第二部分***/
DIV#MainPromotionBanner {
WIDTH: 400px;
HEIGHT: 300px;
margin:0 auto;
border: 1px dotted #666666;
}
#MainPromotionBanner #SlidePlayer {
MARGIN: 0px auto; POSITION: relative
}
#MainPromotionBanner .Slides {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 300px
}
#MainPromotionBanner .Slides LI {
FLOAT: left; WIDTH: 400px; HEIGHT: 300px;
}
#MainPromotionBanner .Slides IMG {
BORDER-TOP-WIDTH: 0px; DISPLAY: block; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 400px; HEIGHT: 300px; BORDER-RIGHT-WIDTH: 0px
}
/***第三部分***/
#MainPromotionBanner .SlideTriggers {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 10; RIGHT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 265px; HEIGHT: 25px
}
#MainPromotionBanner .SlideTriggers LI {
DISPLAY: block; FONT-SIZE: 0.9em; BACKGROUND: url(slide_trigger.gif) no-repeat center center; FLOAT: left; MARGIN: 2px; OVERFLOW: hidden; CURSOR: pointer; COLOR: #<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="74" unitname="a">74a</chmetcnv>8ed; LINE-HEIGHT: 16px; FONT-FAMILY: Arial; WIDTH: 16px; HEIGHT: 16px; TEXT-ALIGN: center
}
#MainPromotionBanner .SlideTriggers LI.Current {
BORDER-TOP-WIDTH: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 1.5em; BACKGROUND: url(slide_trigger_c.gif) no-repeat center center; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px 1px; COLOR: #fff; LINE-HEIGHT: 21px; WIDTH: 21px; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px
}
分析:
1、 第一部分为一般网页设定
2、 第二部分为显示图片区域
3、 第三部分为显示控制按钮
分享到：
相关推荐
超越CSS：Web设计艺术精髓 完整版part2 本书系统、深入地阐释了网站的设计与实现，帮助读者从设计的角度来使用CSS以达到完美的效果。作者通过使用标记和CSS的形象的创造...本书也适合有一定基础的Web设计爱好者阅读。
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
此为《精通CSS:高级Web标准解决方案(第2版)》一书的源码 本书汇集了最有用的CSS 技术，介绍了CSS 的基本概念和最佳实践，结合实例探讨了图像、链接和列表的操纵，还有...本书适合具有HTML 和CSS 基础知识的读者阅读。
CSS核心基础--CSS基础选择器 CSS选择器 什么是CSS选择器？ CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。 CSS...
[W3Cfuns]精通CSS：高级Web标准解决方案(第2版)_含目录 本书汇集了最有用的CSS技术，介绍了CSS的基本概念和最佳实践，结合实例探讨了图像、链接和列表的操纵，还有表单... 本书适合具有HTML和CSS基础知识的读者阅读。
超越CSS：Web设计艺术精髓完整版 压缩包1 本书系统、深入地阐释了网站的设计与实现，帮助读者从设计的角度来使用CSS以达到完美的效果。作者通过使用标记和CSS的形象的创造...本书也适合有一定基础的Web设计爱好者阅读。
第一部分介绍了CSS 基础知识，对一些常用工具和基本技术进行了介绍，包括CSS 选择器等。第二部分展示了各种CSS 效果，包括同一效果的不同实现方式，并讲解了布局设计。第三部分介绍前沿技术，主要是最新HTML5 和CSS3...
超越CSS：Web设计艺术精髓 完整版part1 本书系统、深入地阐释了网站的设计与实现，帮助读者从设计的角度来使用CSS以达到完美的效果。作者通过使用标记和CSS的形象的创造...本书也适合有一定基础的Web设计爱好者阅读。
sanitize.css：最佳实践CSS基础
本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深，直到建立比较复杂的示例。之后...
css样式，很好用好，很不错，可以试试
css+div基础教程 最近在学习JavaScript，在做到个要控制控件样式的例子时，突然有了把常用样式汇总一下的想法，于是乎就写了以下内容，以下是以div为例来汇总的，希望对大家有些帮助。
HTML5+CSS3网站设计基础教程 全套源代码，小白福音
HTML5+CSS3网站设计基础教程（第2版）_源代码.zip
html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习...
[SitePoint] CSS 基础教程 英文版 [SitePoint] Jump Start CSS E Book ☆ 图书概要：☆ This short SitePoint book provides readers with a fun and yet practical introduction to Cascading Style Sheets ...
HTML5与CSS3基础教程（中文第8版） 本书自第1版至今，一直是讲解HTML和CSS入门知识的经典畅销书，全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术，通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版...
书名：CSS基础教程 作者：（英）柯林森 著，刘志忠 等译 来源：人民邮电出版社 出版时间：2007年09月 ISBN:9787115164629 定价：49元 内容介绍： 本书是优秀的CSS 入门书，重点讲述了如何使用CSS 实现基于Web ...
normalize.css：跨浏览器CSS基础
HTML5+CSS3网站设计基础教程_动手实践源代码 chapter01 到 chapter10