Jquery简单幻灯片

看了许多jquery的幻灯片，自己也想学着弄一个，简单是简单了一点。不过研究过，还是比较安慰的啦，以下代码并未在生产环境中使用过，如果您要在生产环境中使用，请慎重

/*
slide(FrameId, FrameWidth, FrameHeight, UlId, isshow,Intervaltime)
外层对象ID，外层宽度，外层高度，内层ID，是否显示半透明层，切换时间间隔
*/
function slide(FrameId, FrameWidth, FrameHeight, UlId, isshow, Intervaltime) {
    var index = 0;
    var count = -1;


    //设置图片切换动画
    function setlistatus() {
        $("#" + FrameId + " #" + UlId + " li").fadeOut("slow");
        $("#" + FrameId + " .ulorder li").removeClass("on")


        $("#" + FrameId + " #" + UlId + " li:eq(" + index + ")").fadeIn("slow");
        $("#" + FrameId + " .ulorder li:eq(" + index + ")").addClass("on");
        index++;
        if (index >= count) {
            index = 0;
        }
        if (isshow) {
            var _href = $("#" + FrameId + " #" + UlId + " li:eq(" + index + ") a").attr("href");
            var _title = $("#" + FrameId + " #" + UlId + " li:eq(" + index + ") a").attr("title");
            if (_title != null && _title != "" && _title != undefined) {
                $("#" + FrameId + " .transparent").html("");
                $("#" + FrameId + " .transparent").html("<a href='" + _href + "' title='" + _title + "'>" + _title + "</a>");
            }
        }
    }


    //初始化样式
    function setStyle() {
        var style = "<style type=\"text/css\">";
        style += "#" + FrameId + " img{ border:0px;}";
        style += "#" + FrameId + " ul,li{ padding:0px; margin:0px;}";
        style += "#" + FrameId + "{height:" + FrameHeight + "px; width:" + FrameWidth + "px; overflow:hidden; border:5px #ccc solid;}";
        style += "#" + FrameId + " li{list-style:none}";
        style += "#" + FrameId + " .ulorder{ position:absolute;z-index:100;}";
        style += "#" + FrameId + " .ulorder li{ cursor:pointer; float:left; font-weight:bold; padding:2px 5px; background-color:White; margin-right:5px; text-align:center}";
        style += "#" + FrameId + " .ulorder .on{ background-color:Red; color:White}";
        if (isshow) {
            style += "#" + FrameId + " .transparent{padding-left:15px; height:50px; line-height:50px; background-color:black;position:absolute;z-index:50}";
            style += "#" + FrameId + " .transparent a{ color:White}";
        }
        style += "</style>";
        return style;
    }


    //初始化序号
    function slideInit() {
        count = $("#" + FrameId + " ul li").length;


        //添加序号
        var ulstr = "<ul class='ulorder'>"
        for (var i = 1; i <= count; i++) {
            ulstr += "<li>" + i + "</li>";
        }
        ulstr += "</ul>";
        $("#" + FrameId).append(ulstr);


        //为序号添加点击事件
        $("#" + FrameId + " .ulorder li").bind("click",
            function () {
                index = $(this).index();
                clearInterval(dingshi);
                setlistatus();
                dingshi = setInterval(setlistatus, Intervaltime);
            });




        var contentHeight = $("#" + FrameId).height() + $("#" + FrameId).position().top;
        var contentWidth = $("#" + FrameId).width() + $("#" + FrameId).position().left;


        var ulorderHeight = $("#" + FrameId + " .ulorder").height();
        var ulorderWidth = $("#" + FrameId + " .ulorder").width();


        $("#" + FrameId + " .ulorder").css("top", (contentHeight - ulorderHeight) + "px");
        $("#" + FrameId + " .ulorder").css("left", (contentWidth - ulorderWidth) + "px");




        if (isshow) {
            //添加半透明 style='height:100px;width:" + FrameWidth + "px'
            var transparent = "<div class=\"transparent\">";


            transparent += "</div>";
            $("#" + FrameId).append(transparent);
            $("#" + FrameId + " .transparent").css('opacity', 0.6);
            $("#" + FrameId + " .transparent").css('width', (FrameWidth - parseInt($("#" + FrameId+ " .transparent").css("padding-left"))) + "px");


            var transparentHeight = $("#" + FrameId + " .transparent").height();
            var transparentWidth = $("#" + FrameId + " .transparent").width();
            var bordtop =parseInt($("#" + FrameId).css("border-top-width"));


            $("#" + FrameId + " .transparent").css("top", (contentHeight - transparentHeight + bordtop) + "px");
            $("#" + FrameId + " .transparent").css("left", ($("#" + FrameId).position().left + $("#" + FrameId).css("border-left-width")) + "px");
        }
        setlistatus();
        var dingshi = setInterval(setlistatus, Intervaltime);
    }


    $("#" + FrameId).append(setStyle());
    slideInit();
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>




    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/Slide.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(
        function() {
        slide("DuDuCMSRoll", 600, 417, "content", true,5000);
        slide("Div1", 450, 300, "Ul1",false,3000);
        }
        );
    </script>




</head>
<body>
    <div id="DuDuCMSRoll">
        <ul id="content">
            <li><a href="http://www.baidu.com?id=1" title="kong">
                <img alt="kong" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1247.jpg" /></a></li>
            <li><a href="http://www.baidu.com?id=2" title="郊外风景图片下载">
                <img alt="郊外风景图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic488.jpg" /></a></li>
            <li><a href="http://www.baidu.com?id=3" title="高清养生少女图片下载">
                <img alt="高清养生少女图片下载" src="http://pic.sc.chinaz.com/files/pic/pic7/pic3865.jpg" /></a></li>
            <li><a href="http://www.baidu.com?id=4" title="不知道">
                <img alt="不知道" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1763.jpg" /></a></li>
            <li><a href="http://www.baidu.com?id=5" title="绿色叶子图片下载">
                <img alt="绿色叶子图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic626.jpg" /></a></li>
        </ul>
    </div>
    <div id="Div1">
        <ul id="Ul1">
            <li><a href="">
                <img alt="kong" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1247.jpg" /></a></li>
            <li><a href="">
                <img alt="郊外风景图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic488.jpg" /></a></li>
            <li><a href="">
                <img alt="高清养生少女图片下载" src="http://pic.sc.chinaz.com/files/pic/pic7/pic3865.jpg" /></a></li>
            <li><a href="">
                <img alt="不知道" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1763.jpg" /></a></li>
            <li><a href="">
                <img alt="绿色叶子图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic626.jpg" /></a></li>
        </ul>
    </div>
</body>
</html>

发表于 2011-12-13 13:54 卡莱阅读(414) 评论(0) 编辑收藏举报

刷新页面返回顶部

Jquery简单幻灯片

公告

导航