自己写的一个幻灯片，喜欢的可以看一下。做的不好的地方可以指点

本帖最后由 wln00 于 2013-04-03 15:02:26 编辑

解决方案 »

  1.   

    挺好。。难道现在没有不用jquery的吗。实习的时候也写过一个。
      

  2.   

    Jquery有什么不好么？就多了一个库文件而已，虽然方法都封装好了。不过真的要用javascript写的话太复杂了。
      

  3.   


    jquery很好。。我以前也用。
      

  4.   

    写得有点复杂了。还有class=buttom内容最好由js自动生成，放到<div class=iframe>里，有多少图片就生成多少按钮。
      

  5.   

    <!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
        <style type="text/css">
            * { margin: 0; padding: 0; }
            li,ul { list-style: none;margin: 0; padding: 0; }
            .frame { width: 280px; height: 280px; position: relative; }
            .iframe { overflow:hidden;width: 280px; height: 280px; }
            .iframe ul li { float: left;width:280px; }
            .button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }
            .button li {float: left;cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: #fff; background: #000; }
            .button .on { color: #000; background: #fff; }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                slide(".frame");
            });
            function slide(cls){
                var li=$(cls).find("li").size();//统计多少张图片
                $(".iframe ul").width(280*li);//设置宽度，使图片排成一排
                var s="<ul class='button'>";//生成li的按钮
                for(var i=0;i<li;i++){
                    s+="<li>"+(i+1)+"</li>";
                }
                s+="</ul>";
                $(s).appendTo($(cls));//生成按钮结束
                var _i=0;//当前的编号
                $(cls).find(".button li").each(function(i){
                    //生成按钮点击事件
                    $(this).click(function(){
                        _i=i;
                        $(this).attr("class","on").siblings().removeAttr("class");//设置class，没必要再多加一个off
                        $(".iframe").animate({scrollLeft:i*280},"slow");//图片移动
                    });
                }).eq(0).click();
                function tt(){//定时器函数
                    _i++;
                    _i=_i%li;
                    $(cls).find(".button li").eq(_i).click();//自动点击切换图片
                }
                var t=setInterval(tt,3000);//定时器
                $(cls).hover(function(){ 
                    clearInterval(t);//鼠标经过清除定时器，离开时又触发
                },function(){
                    t=setInterval(tt,3000);
                })
            }
        </script>
    </head>
    <body>
    <div class="frame">
        <div class="iframe">
            <ul>
            <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_000.jpg" width="280" height="280" alt="img" /></a></li>
            <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_001.jpg" width="280" height="280" alt="img" /></a></li>
            <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_002.jpg" width="280" height="280" alt="img" /></a></li>
            <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_003.jpg" width="280" height="280" alt="img" /></a></li>
            <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_004.jpg" width="280" height="280" alt="img" /></a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
      

  6.   

    写的挺好的，不过你写死了一个东西，那就是280，应该获取它var li_width = boxiframe.find("li").width()，还有就是把传入的东西一开始赋值给字符串，这样就可以封装为插件了，你写的挺好的。
      

  7.   

    已经弄成插件的类型了哦http://bbs.csdn.net/topics/390415083
      

  8.   

    我已经修改了还有封装起来了。你可以看看。http://bbs.csdn.net/topics/390415083
      

  9.   

    <script type="text/javascript">alert("不错，学习下！");</script>
      

  10.   


    <script type="text/javascript">alert("楼上的表达方式真鸟！");</script>