这是播放器主要实现简单的图片展示效果，可以控制默认显示的图片，可以修改图片切换的时间间隔。

样式文件 CssFile.css：

body,ul{

margin:0;

padding:0;

}

li{

list-style:none;

}

img{

border:none;

display:block;

}

.slide-wp{

width:500px;

height:300px;

overflow:hidden;

position:absolute;

left:50%;

top:20%;

margin-left:-250px;

margin-top:-60px;

}

.nav-wp{

position:absolute;

background:#ccc;

top:43%;

margin-top:170px;

left:50%;

margin-left:-100px;

border-radius:4px;

-moz-border-radius:4px;

-webkit-border-radius:4px;

padding:0 20px 6px 10px;

_padding:0 20px 2px 10px;

}

.nav li{

float:left;

margin-left:10px;

font-size:20px;

font-weight:bold;

font-family:tahoma;

color:#22739e;

cursor:pointer;

height:18px;

}

.nav li.cur{

color:#ff7a00;

}

.next{

font-family:"微软雅黑"; font-size:13px; font-weight:bold;

position:absolute;

top:1px;

left:160px;

padding:4px 8px;

color:#333;

background:#ccc;

height:20px;

border-radius:4px;

-moz-border-radius:4px;

-webkit-border-radius:4px;

cursor:pointer;

width: 62px;

}

JS文件 ImageShow.js：

var HR = {

$: function (i) { return document.getElementById(i) },

$$: function (c, p) { return p.getElementsByTagName(c) },

ce: function (i, t) {

var o = document.createElement(i);

t.appendChild(o);

return o;

}

};

HR.slider3D = function () {

var init = function (o) {

this.o = o;

var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);

this.l = li.length;

this.w = wp.offsetWidth;

this.h = wp.offsetHeight;

this.at = o.auto ? o.auto : 4;

var con = this.con = HR.ce('div', wp);

con.style.cssText = 'position:absolute;left:0;top:0;width:' + this.w + 'px;height:' + this.h + 'px';

ul.style['display'] = 'none';

this.a1 = HR.ce('a', con);

this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden';

this.a2 = HR.ce('a', con);

this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';

this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';

this.img = HR.$$('img', ul);

this.s = o.maskSize ? o.maskSize : 5;

this.mask11 = HR.ce('span', this.a1);

this.mask12 = HR.ce('span', this.a1);

this.mask21 = HR.ce('span', this.a2);

this.mask22 = HR.ce('span', this.a2);

document.getElementById("mask-slider").style.display = "";

this.pos(0);     //设置默认显示的图片索引

}

init.prototype = {

pos: function (i) {

clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i;

var navli = HR.$$('li', HR.$(this.o.navId));

for (var j = 0; j < navli.length; j++) {

navli[j].className = i == j ? 'cur' : '';

}

var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this;

img1.src = i == 0 ? this.img[this.l - 1].src : this.img[i - 1].src;

img1.width = this.w;

img2.src = this.img[i].src;

img2.width = 0;

img1.height = img2.height = this.h;

this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 ' + this.w / 2 + 'px';

this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 ' + this.w / 2 + 'px';

this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';

this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';

this.li[i].a = setInterval(function () { _this.anim(i) }, 20);

},

anim: function (i) {

var w1 = HR.$$('img', this.a1)[0].width, w2 = HR.$$('img', this.a2)[0].width;

if (w2 == this.w) {

clearInterval(this.li[i].a);

HR.$$('img', this.a1)[0].width = 0;

HR.$$('img', this.a2)[0].width = this.w;

this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';

this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h / this.s + 'px';

this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w / 2 + 'px';

this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';

} else {

HR.$$('img', this.a1)[0].width -= Math.ceil((this.w - w2) * .13);

HR.$$('img', this.a2)[0].width += Math.ceil((this.w - w2) * .13);

this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width / 2 + 'px';

this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width * this.h / (this.s * this.w) + 'px';

this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width / 2 + 'px';

this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h / this.s - HR.$$('img', this.a2)[0].width * this.h / (this.s * this.w) + 'px';

if (!this.au) this.auto();

}

},

auto: function () {

var _this = this;

//alert(this.cur);

if (this.cur == 5) {

document.getElementById("mask-slider").style.display = "";

this.stop();

}

else {

document.getElementById("mask-slider").style.display = "none";

this.au = setInterval(function () { _this.move() }, this.at * 1000);

}

},

move: function () {

var n = this.cur == this.l - 1 ? 0 : this.cur + 1;

this.pos(n);

},

stop: function () {

clearInterval(this.au);

}

}

return init;

}();

var mySlider = new HR.slider3D({

id: 'slider',         //div显示框的ID

maskSize: 6,     //容纳的图片数量大小

navId: 'nav',     //存放图片下方的序列点的容器ID

auto: 5            //图片切换的时间间隔大小，以秒为单位

})

显示界面：

注意：页面还需引用样式文件CssFile.css；

<div style="margin: 0 auto; width: 650px;">

<div id="slider" class="slide-wp">

<ul>

<li>

        <%--每张图片的路径--%>

<img src="data:images/img01.png" alt="" /></li>

<li>

<img src="data:images/ img02.png" alt="" /></li>

<li>

<img src="data:images/ img03.jpg" alt="" /></li>

<li>

<img src="data:images/ img04.jpg" alt="" /></li>

<li>

<img src="data:images/ img05.png" alt="" /></li>

<li>

<img src="data:images/ img06.png" alt="" /></li>

</ul>

</div>

<div id="mask-slider" class="slide-wp" style="display: none;"> </div>

<div class="nav-wp">

<ul id="nav" class="nav">

<li οnclick="mySlider.pos(0)">●</li>

<li οnclick="mySlider.pos(1)">●</li>

<li οnclick="mySlider.pos(2)">●</li>

<li οnclick="mySlider.pos(3)">●</li>

<li οnclick="mySlider.pos(4)">●</li>

<li οnclick="mySlider.pos(5)">●</li>

</ul>

</div>

<script type="text/javascript" src="js/ ImageShow.js"></script>

</div>