【很酷的js幻灯片】

效果如下：

附件

这个是：网易教育频道的 我弄出来给喜欢的朋友！

需要在CSS里面加入定义，适合有一定CSS基础的人用。可根据情况自己修改。
红色部分为4个必须的图片存放位置
可以改绿色部分控制图片大小
蓝色的是外框自然要比红色的大一些哦
其它文字颜色什么的自己根据需要改吧

ul {border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; border-right-width: 0px}
ol {border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; border-right-width: 0px}
li {border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; border-right-width: 0px}
.clear {clear: both; font-size: 1px; visibility: hidden; width: 1px}
#focusPic { width:250px; font-size:12px}
#focusPic h2 { font-size:15px; text-align: center; padding:0px; margin:0px;}
#focusPic h2 a{color:#000000}
#focusPic h2 a:hover{color:#c00;text-decoration: underline}
#focusPic a {text-decoration: none}
.focusPic { background: #fff; margin: 0px auto; width: 250px}
.focusPic .pic {padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px auto; overflow: hidden; width: 240px; padding-top: 5px; height: 190px}
.focusPic H2 {padding-right: 0px; padding-left: 8px; font-size: 14px; padding-bottom: 3px; padding-top: 2px; text-align: left}
.focusPic P {padding-right: 0px; padding-left: 8px; padding-bottom: 10px; margin: 0px; line-height: 160%; padding-top: 0px; text-align: left}
.focusPic .textNum {padding-right: 8px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px}
.focusPic .textNum .text {padding-right: 6px; padding-left: 0px; float: right; padding-bottom: 0px; padding-top: 7px}
.focusPic .textNum .num {float: right; overflow: hidden; width: 112px; height: 18px}
.focusPic .textNum .bg1 {background: url(/skin/abc/num1.gif)}
.focusPic .textNum .bg2 {background: url(/skin/abc/num2.gif)}
.focusPic .textNum .bg3 {background: url(/skin/abc/num3.gif)}
.focusPic .textNum .bg4 {background: url(/skin/abc/num4.gif)}
.focusPic .textNum .num ul {float: left; width: 112px}
.focusPic .textNum .num li {padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; float: left; padding-bottom: 0px; width: 28px; color: #fff; padding-top: 5px; list-style-type: none; text-align:center}
.focusPic .textNum .num li a {padding-right: 5px; padding-left: 5px; padding-bottom: 0px; color: #fff; padding-top: 0px}
.focusPic .textNum .num li a:visited {color: #fff}
.focusPic .textNum .num li a:hover {color: #ff0}
#focusPic .cDRed{ color:#C00}
#focusPic .cDRed a:hover{text-decoration: underline}
#focusPic1{display: block}
#focusPic2 ,#focusPic3 ,#focusPic4 {display: none}
#focusPic .pic img { width:240px; height:180px}