https://kbus.com.tw/js/silder.js

1      $(function(){
2        var $block = $('#abgne_fade_pic'), 
3          $ad = $block.find('.ad'),
4          showIndex = 0,      // 預設要先顯示那一張
5          fadeOutSpeed = 1000,  // 淡出的速度
6          fadeInSpeed = 1000,   // 淡入的速度
7          defaultZ = 10,      // 預設的 z-index
8          isHover = false,
9          timer, speed = 2000;  // 計時器及輪播切換的速度
10        
11        // 先把其它圖片的變成透明
12        $ad.css({
13          opacity: 0,
14          zIndex: defaultZ - 1
15        }).eq(showIndex).css({
16          opacity: 1,
17          zIndex: defaultZ
18        });
19        
20        // 組出右下的按鈕
21        var str = '';
22        for(var i=0;i<$ad.length;i++){
23          str += '<a href="#">' + (i + 1) + '</a>';
24        }
25        var $controlA = $('#abgne_fade_pic').append($('<div class="control">' + str + '</div>').css('zIndex', defaultZ + 1)).find('.control a');
26
27        // 當按鈕被點選時
28        // 若要變成滑鼠滑入來切換時, 可以把 click 換成 mouseover
29        $controlA.click(function(){
30          // 取得目前點擊的號碼
31          showIndex = $(this).text() * 1 - 1;
32          
33          // 顯示相對應的區域並把其它區域變成透明
34          $ad.eq(showIndex).stop().fadeTo(fadeInSpeed, 1, function(){
35            if(!isHover){
36              // 啟動計時器
37              timer = setTimeout(autoClick, speed + fadeInSpeed);
38            }
39          }).css('zIndex', defaultZ).siblings('a').stop().fadeTo(fadeOutSpeed, 0).css('zIndex', defaultZ - 1);
40          // 讓 a 加上 .on
41          $(this).addClass('on').siblings().removeClass('on');
42
43          return false;
44        }).focus(function(){
45          $(this).blur();
46        }).eq(showIndex).addClass('on');
47
48        $block.hover(function(){
49          isHover = true;
50          // 停止計時器
51          clearTimeout(timer);
52        }, function(){
53          isHover = false;
54          // 啟動計時器
55          timer = setTimeout(autoClick, speed);
56        })
57        
58        // 自動點擊下一個
59        function autoClick(){
60          if(isHover) return;
61          showIndex = (showIndex + 1) % $controlA.length;
62          $controlA.eq(showIndex).click();
63        }
64        
65        // 啟動計時器
66        timer = setTimeout(autoClick, speed);
67      });