[JQuery] slideShow 輪播

記錄一下 好用的輪播套件 slick 連結

然後下面範例是拿其他教學範例多加的功能

在特定的高度上會停止撥放幻燈片

     $(document).ready(function (){
            //window.scroll 抓取使用者滾輪高度..這裡自訂600
            var stop = false;
            $(window).scroll(function () {
                var scrollTop = $(window).scrollTop();
                if (scrollTop >= 600 ) {
                    console.log("stop" + scrollTop);
                    stop = true;
                } else {
                    console.log("r" + scrollTop);
                    stop = false;
                }
            });
 
            var num = 1;
            var tNum = 5;
            var duration = 2000;
            console.log("A");
 
            run();
            
            $("#box").mouseover(function () { stopRun(); })
            .mouseout(function () { run();})
      
            for (var i = 1; i <= tNum; i++) {
                document.getElementById("tab" + i).onclick = show;
                document.getElementById("con" + i).style.display = "none";
            }
            document.getElementById("con1").style.display = "block";
            document.getElementById("tab1").className = "now-tab";
 
            //在 autoShow 判斷是否停止撥放
            function autoShow() {
                if (stop) return;
 
                for (var i = 1; i <= tNum; i++) {
                    document.getElementById("con" + i).style.display = "none";
                    document.getElementById("tab" + i).className = "";
                }
                if (num < tNum) { num++; } else { num = 1; }
                document.getElementById("con" + num).style.display = "block";
                document.getElementById("tab" + num).className = "now-tab";
 
            }
 
            function show() {
                num = this.id.substr(3) - 1;
                autoShow();
            }
 
            function stopRun() { clearInterval(myInterval); }
 
            function run() { myInterval = setInterval(autoShow, duration); }
          
        });

來源:Flycan-輪播廣告 教學