日期:2014-05-16  浏览次数:20444 次

自己写的一个幻灯片,喜欢的可以看一下。做的不好的地方可以指点
本帖最后由 wln00 于 2013-04-03 15:02:26 编辑
[align=center]效果图

[/align]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>幻灯片切换</title>
    <script type="text/javascript" src="jquery.min.js"></script>  <!--别忘了引入 -->
    <style type="text/css">
        * { margin: 0; padding: 0; }
        ul { list-style: none; }
        .frame { width: 280px; height: 280px; overflow: hidden; margin: 0 auto; position: relative; }
        .iframe { width: 840px; height: 280px; position: absolute; left: 0; z-index: 200; }
            .iframe ul li { float: left; /*确定li的宽是必要的*/width:280px; }
        .buttom { white-space: nowrap; position: absolute; bottom: 15px; right: 15px; z-index: 300; }
            .buttom a { display: inline-block; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; text-decoration: none; border-radius: 7px; }
        .on { color: #000; background: #fff; }
        .off { color: #fff; background: #000; }
    </style>
    <script type="text/javascript">
        function boxfun(_box) {
            var boxiframe = $(_box + " div.iframe");
            var boxbuttom = $(_box + " div.buttom");
            var li_width = boxiframe.find("li").width();//确定li的宽是必要的
            var ss = parseInt(boxiframe.css("left"));
            dd = setInterval(showimg, 2000);
            boxbuttom.children().addClass("off");
            boxbuttom.children().mouseenter(function () {
                boxbuttom.children().addClass("off");
                var a_id = boxbuttom.children().index($(this)[0]);
                HuanDeng(a_id);
   &n