淘宝幻灯片效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaozhao_19/article/details/2313784

本文介绍了一种模仿淘宝网站幻灯片效果的实现方法，通过HTML、CSS和JavaScript完成图片轮播及控制按钮的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：

代码如下:(主要部分)

第一步：

TaobaoSlidesEffect.htm

<TITLE>淘宝网幻灯片效果</TITLE>

<body>

</UL>

</DIV>

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: #74a8ed; 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、第三部分为显示控制按钮