JS

用js怎么编辑“广告轮播”的效果？

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>图片轮换</title>    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>    <script language="javascript" type="text/javascript">
            $(document.body).ready(function() {
                InitSwitchObj();
            });
            function InitSwitchObj() {
                IMGLIST = $("#IMG_UL_LIST_1");
                IMGINDEX = $("#IMG_INDEX_UL_LIST_1");
                MAXINDEX = IMGLIST.find("li").length;
                currIndex = 0;
                currImgIndex = IMGINDEX.find("li:eq(" + currIndex + ")");
                currImgLi = IMGLIST.find("li:eq(" + currIndex + ")");
                currImgLi.show();
                interValTime = 3000;
                fadeInTime = 800
                fadeOutTime = 1000;
                ImageAutoSwitch();
                ImageManualSwitch();
                ImageStopSwitch();
            }
            //執行時間
            var interValTime = 0;
            //下一張圖片顯示時間
            var fadeInTime = 0;
            //上一張圖片的消失時間
            var fadeOutTime = 0;
            //保存當前圖片定時的對象
            var imageTimer = null;
            //當前的索引
            var currIndex = null;
            //當前圖片的所以
            var currImgIndex = null;
            //當前圖片
            var currImgLi = null;
            //記錄需要切換的圖片集合
            var IMGLIST = null;
            //記錄需要切換的圖片集合的索引。
            var IMGINDEX = null;
            //最大圖片個數
            var MAXINDEX = null;
            //自動定時切換。
            function ImageAutoSwitch() {
                if (imageTimer != null) {
                    clearInterval(imageTimer);
                }
                imageTimer = setInterval("IntervalImage()", interValTime);
            }
            //手動切換圖片
            function ImageManualSwitch() {
                IMGINDEX.find("li").each(function(i) {
                    $(this).hover(function() {
                        if (imageTimer != null) {
                            clearInterval(imageTimer);
                        }
                        currIndex = i;
                        ImageSwitchChange();
                    }, function() {
                        ImageAutoSwitch();
                    });            });
            }
            //鼠標放到圖片上的換，停止切換
            function ImageStopSwitch() {
                IMGLIST.find("li").each(function() {
                    $(this).hover(function() {
                        if (imageTimer != null) {
                            clearInterval(imageTimer);
                        }
                    }, function() {
                        ImageAutoSwitch();
                    });
                });        }
            //自动切换图片
            function IntervalImage() {
                currIndex = parseFloat(currIndex);
                currIndex = currIndex + 1;
                //如果切換到最大數量的時候則從頭開始
                if (currIndex >= MAXINDEX) {
                    currIndex = 0;
                }
                //將原來的現實圖片索引的背景透明
                ImageSwitchChange();
            }
            //切換圖片的時候，響應的圖片要實現漸變效果
            function ImageSwitchChange() {
                if (currImgIndex != null) {
                    currImgIndex.css({ "background-color": "transparent" });
                }
                currImgIndex = IMGINDEX.find("li:eq(" + currIndex + ")");
                imgLi = IMGLIST.find("li:eq(" + currIndex + ")");
                currImgIndex.css({ "background-color": "#999999" });
                if (currImgLi != null) {
                    currImgLi.fadeOut(fadeOutTime, function() {
                        imgLi.fadeIn(fadeInTime);
                    });
                }
                currImgLi = imgLi;
            }
        </script>    <style type="text/css">
            .img-swith-main
            {
                position: relative;
                font-family: Arial, Verdana;
                font-size: 12px;
                width: 400px;
                height: 300px;
                background-color: #f3f3f3;
            }
            .img-switch
            {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .img-switch ul
            {
                margin: 0px;
                padding: 0px;
                list-style-type: none;
                overflow: hidden;
                width: 100%;
                height: 100%;
            }
            .img-switch ul li
            {
                float: left;
                width: 100%;
                height: 100%;
                display: none;
            }
            .img-switch ul li img
            {
                width: 100%;
                height: 100%;
                border: 0px;
            }
            .img-switch-clear
            {
                clear: both;
            }
            .img-switch-index
            {
                position: absolute;
                bottom: 20px;
                right: 20px;
                overflow: hidden;
            }
            .img-switch-index ul
            {
                margin: 0px;
                padding: 0px;
                list-style-type: none;
            }
            .img-switch-index ul li
            {
                padding: 2px;
                border: 1px solid #c0c0c0;
                margin-right: 5px;
                float: left;
                font-weight: bold;
                cursor: pointer;
                color: Black;
                padding-left: 6px;
                padding-right: 6px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div class='img-swith-main'>
                <div class="img-switch">
                    <ul id="IMG_UL_LIST_1">
                        <li>
                            <img src="../file/news/20100118093115.JPG" /></li>
                        <li>
                            <img src="../file/news/20100326142850.JPG" /></li>
                        <li>
                            <img src="../file/news/20100118094417.JPG" /></li>
                        <li>
                            <img src="../file/news/20100326142627.JPG" /></li>
                        <li>
                            <img src="../file/news/20100317194049.JPG" /></li>
                    </ul>
                </div>
                <div class='img-switch-index'>
                    <ul id="IMG_INDEX_UL_LIST_1">
                        <li id="li_index_default" style="background-color: #aaa;">01</li>
                        <li>02</li>
                        <li>03</li>
                        <li>04</li>
                        <li>05</li>
                    </ul>
                </div>
                <div class='img-switch-clear'>
                </div>
            </div>
        </div>
        </form>
    </body>
    </html>
      

  2.   

    http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html