使用 Mslider
Mslider是一个幻灯片切换的插件，本插件由原生JavaScript所编写，不需要任何JS库。
1.引用JS
<script type="text/javascript" src="Mslider.js"><script>
2.编写HTML
<div class="slider" id="slider"> <ul> <li><a href="#"><img src="images/4.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> <li><a href="#"><img src="images/2.jpg" /></a></li> <li><a href="#"><img src="images/1.jpg" /></a></li> <li><a href="#"><img src="images/4.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> </ul> </div>
PS:以上结构为必须结构，否则插件可能将无法运行。如需要扩展像 上一张，下一张 功能，或者幻灯右下方的小导航则要另编写HTML。下面将会继续介绍。
3.编写CSS
.slider { width:480px; height:320px; overflow:hidden; }
PS:以上 CSS 写是必须的，需要定宽，定高，然后设置 overflow 为 hidden 。
4.初始化JS
<script type="text/javascript">
new Mslider({
id : 'slider', //对应幻灯容器的ID名
auto : true //是否开启自动播放，默认不开启
});
</script>
PS:以上就会形成一个最基本的图片切换效果。它将不会包含 上一张，下一张 和 幻灯右下角导航的功能。
Expand：扩展上一张，下一张功能
1.增加HTML
<div class="slider" id="slider"> <ul> <li><a href="#"><img src="images/4.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> <li><a href="#"><img src="images/2.jpg" /></a></li> <li><a href="#"><img src="images/1.jpg" /></a></li> <li><a href="#"><img src="images/4.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> </ul> <a href="javascript:;" class="arrow arrow-left" id="arrow-left"></a> <a href="javascript:;" class="arrow arrow-right" id="arrow-right"></a> </div>
PS:以上增加的 HTML 不局限在 slider 容器，可以将他放在外面，这看功能需求了，CSS须自己扩展，只要将 上一张的 ID名 对应插件参数的 arrow-left, 下一张的 ID名 对应插件参数 arrow-right 即可。
2.增加 CSS
.arrow {
display:none;
position:absolute;
top:50%;
margin-top:-15px;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat 0px 0px;
z-index:20;
}
.arrow-left { left:10px; background-position:0px 0px; }
.arrow-right { right:10px; background-position:-30px 0px; }
3.增加 JS
<script type="text/javascript">
new Mslider({
id : 'slider', //对应幻灯容器的ID名
auto : true, //是否开启自动播放，默认不开启
arrowLeft : 'arrow-left', //上一张
arrowRight : 'arrow-right', //下一张
isHidden : true //是否自动隐藏 上一张，下一张箭头，默认不开启
});
</script>
Expand：扩展幻灯小导航
1.增加HTML
<div class="slider" id="slider"> <ul> <li><a href="#"><img src="images/4.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> <li><a href="#"><img src="images/2.jpg" /></a></li> <li><a href="#"><img src="images/1.jpg" /></a></li> <li><a href="#"><img src="images/4.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> </ul> <a href="javascript:;" class="arrow arrow-left" id="arrow-left"></a> <a href="javascript:;" class="arrow arrow-right" id="arrow-right"></a> </div> <div class="promo-nav" id="promo-nav"></div>
PS:以上只要写个容器即可，CSS须自己扩展。里面的 UL li 由插件自动生成，此容器也是不局限于哪个容器下，也只要对应插件的 nav 参数即可。
2.增加CSS
.promo-nav {
position:absolute;
bottom:10px;
right:10px;
height:13px;
line-height:9px;
text-align:center;
border-radius:10px;
z-index:22;
background:rgba(255, 255, 255, 0.3);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4CFFFFFF', EndColorStr='#4CFFFFFF');
}
.promo-nav ul li {
float:left;
vertical-align:middle;
zoom:1;
margin:2px 3px;
}
.promo-nav ul li a {
font:0 a;
text-indent:-9999px;
display:block; width:9px;
height:0px;
padding-top:9px;
border-radius:50%;
background:#B7B7B7;
overflow:hidden;
}
.promo-nav ul li a.current { background:#F40; }
3.增加 JS
<script type="text/javascript">
new Mslider({
id : 'slider', //对应幻灯容器的ID名
auto : true, //是否开启自动播放，默认不开启
arrowLeft : 'arrow-left', //上一张
arrowRight : 'arrow-right', //下一张
isHidden : true, //是否自动隐藏 上一张，下一张箭头，默认不开启
nav : 'promo-nav', //幻灯小导航的ID名
navEvent : 'click', //小导航的每个li的触发事件，默认为 click 还可以为 mouseover
current : 'current' //默认小导航选中时候的 className 名， ClassName是给的 a 标签
});
</script>
Expand：Mslider 幻灯标题显示
1.增加HTML
<div class="slider" id="slider"> <ul> <li><a title="文本1" href="#"><img src="images/4.jpg" /></a></li> <li><a title="文本1" href="#"><img src="images/3.jpg" /></a></li> <li><a title="文本1" href="#"><img src="images/2.jpg" /></a></li> <li><a title="文本1" href="#"><img src="images/1.jpg" /></a></li> <li><a title="文本1" href="#"><img src="images/4.jpg" /></a></li> <li><a title="文本1" href="#"><img src="images/3.jpg" /></a></li> </ul> <a href="javascript:;" class="arrow arrow-left" id="arrow-left"></a> <a href="javascript:;" class="arrow arrow-right" id="arrow-right"></a> </div> <div class="promo-nav" id="promo-nav"></div> <div class="slider-text" id="slider-text"></div>
PS:以上也是只要写个容器即可，CSS须自己扩展。然后给幻灯容器里的 A 标签添加 title 属性就是 Slider Text 的文本了。
2.增加CSS
.slider-text {
position:absolute;
width:100%;
height:28px;
line-height:28px;
overflow:hidden;
bottom:0px;
left:0px;
background:#000;
background:rgba( 0, 0, 0, 0.5);
filter:alpha(opacity=50);
color:#FFF;
text-indent:1em;
z-index:12;
}
3.增加JS
<script type="text/javascript">
new Mslider({
id : 'slider', //对应幻灯容器的ID名
auto : true, //是否开启自动播放，默认不开启
arrowLeft : 'arrow-left', //上一张
arrowRight : 'arrow-right', //下一张
isHidden : true, //是否自动隐藏 上一张，下一张箭头，默认不开启
nav : 'promo-nav', //幻灯小导航的ID名
navEvent : 'click', //小导航的每个li的触发事件，默认为 click 还可以为 mouseover
current : 'current', //默认小导航选中时候的 className 名， ClassName是给的 a 标签
isText : true, //默认是否开启 文本容器 default = false
text : 'slider-text' //默认 Slider Text 容器的 ID名
});
</script>
Expand：Mslider 更多参数
<script type="text/javascript">
new Mslider({
id : 'slider', //对应幻灯容器的ID名
auto : true, //是否开启自动播放， default = false
time : 3500, //幻灯每次自动切换的时间
speed : 40, //幻灯动画的速度
effect : 'Expo', //动画的效果 default = [ Linear, Quint, Expo, Bounce ];
direction : 'Lateral', //动画执行方向 default = [ Lateral, Vertical ] Lateral=横向，Vertical=竖向
arrowLeft : 'arrow-left', //Prev 上一张 ID 名
arrowRight : 'arrow-right', //Next 下一张 ID 名
isHidden : true, //是否自动隐藏 Prev Next容器 default = false
nav : 'promo-nav', //幻灯小导航的ID名
navEvent : 'click', //小导航的每个li的触发事件，默认为 click 还可以为 mouseover default = [ click, mouseover ]
current : 'current', //默认小导航选中时候的 className 名， ClassName是给的 a 标签 default = current
isText : true, //默认是否显示 文本容器 default = false
text : 'slider-text' //默认 Slider Text 容器的 ID名
});
</script>
更多使用的方法，各位自己扩展吧