[jQuery] 手寫div、自訂某區塊輪播

2011-05-05

18860
0
jQuery
2011-09-05

其實InnerFade 套件已經提供圖片、某複雜區塊的Html輪播功能

Max BLOG. (^_^)y 研究 jQuery 輪播(轉場) 特效http://maxtellyou.blogspot.com/2011/04/jquery.html

如果自己手寫的話，請參考

jQuery - 簡易 div 區塊或圖片輪播http://maiamhere.blogspot.com/2011/04/jquery-div.html

只是css要追加一下，效果才會完美

以

<div class=”container”>

</div>

為例

<style type="text/css">

/*每個要輪播的元素都先隱藏且重曡*/
.aaa
{
 display:none; 
 z-index:20;
 position:absolute;
}
/*輪播元素們的容器要設高度，底下的元素才不會浮上來*/
div.container
{
 height:210px;    
}
</style>

2011.5.11追記

上面那篇文章有一段

var $Storage = $('.Storage').toArray();

似乎是var $Storage的寫法從1.4版核心函式庫才有支援

2011.5.24 記錄一下，一邊輪播一邊更換另一區塊圖片，而且當點選該圖片時，輪播區會切換到圖片對應的資料

<script type="text/javascript">


        $(document).ready(function () {
           

            //初始輪播效果，從第 0 個元素開始播，輪播效果的 function 在下面
            delayedUpdatelist(0);


            //當點選圖片時，把圖片對應的index傳給 clickDelayedUpdatelist函數
            $('.img_newsIcon').click(function () {

                var currentIndex = $(this).attr("name");
                clickDelayedUpdatelist(parseInt(currentIndex));
            });


        });


        var t;
        function delayedUpdatelist(x) {
            //將要輪播的div們讀成陣列，並計算總共有幾個元素要被輪播
            var $aaa = $('.aaa').toArray();//似乎只能宣告成區域變數？
            var size = $aaa.length;
            x = parseInt(x);
            if (x < size) {
                //切換圖片icon
                swapIcon(x);

               
                $('.aaa:eq(' + x + ')').fadeIn("slow").delay(5000).fadeOut("slow");//600+5000+600=此元素出現至消失共花6200毫秒
                //指定要被輪播的元素還沒大於要被播放的總數時，
                //就 show 出元素，停留 5 秒，然後 fadeOut


                t = setTimeout(function () { delayedUpdatelist(parseInt(x) + 1) }, 5600);//要轉型別


            
            } else {

                x = 0;
               //切換圖片icon
                swapIcon(x);
               
               $('.aaa:eq(' + x + ')').fadeIn("slow").delay(5000).fadeOut("slow");//600+5000+600=此元素出現至消失共花6200毫秒

                t = setTimeout(function () { delayedUpdatelist(parseInt(x) + 1) }, 5600);

                //若指定要被輪播的元素已大於等於被輪播的總數，就將 x 設為 0，重頭播放第 0 個元素。
            }
        }


      

        function clickDelayedUpdatelist(index) {

            clearTimeout(t); //清除之前遞迴的函數

            delayedUpdatelist(index);//從目前的位置開始遞迴
        
        }

        function swapIcon(index) {
            index = parseInt(index, 10); //轉型成int，防呆

           $('.img_newsIcon:eq(' + index + ')').attr("src", $('.img_newsIcon:eq(' + index + ')').attr("src").replace(".jpg", "_on.jpg"));


            //還原其他圖片
            switch (index) {
                case 0:
                    $('.img_newsIcon:eq(1)').attr("src", 'images/guide_bt_02.jpg');
                    $('.img_newsIcon:eq(2)').attr("src", 'images/guide_bt_03.jpg');
                    break;
                case 1:
                    $('.img_newsIcon:eq(0)').attr("src", 'images/guide_bt_01.jpg');
                    $('.img_newsIcon:eq(2)').attr("src", 'images/guide_bt_03.jpg');
                    break;
                case 2:
                    $('.img_newsIcon:eq(0)').attr("src", 'images/guide_bt_01.jpg');
                    $('.img_newsIcon:eq(1)').attr("src", 'images/guide_bt_02.jpg');
                    break;
                default:
                    break;
            }


        }

        
    </script>

================================

2011.9.5 梅問題這邊有較完美的範例

jQuery教學－淡入淡出的廣告輪播器

回首頁