jQuery視差滑塊jQuery Parallax Slider image 圖片滑動

本教程中，我們將看看如何創建一個具有視差動畫效果的jQuery滑塊。在這個例子中，只用幾行代碼就實現了視差滑塊(少於40行和3kb)。jQuery庫中眾所周知和使用最廣泛的函數編寫了這個例子。很容易理解代碼流並根據您的需要進行定制。

在這個例子中，我使用init()函數一個接一個地定位幻燈片。幻燈片縮略圖列在滑塊圖像下方。幻燈片和縮略圖將添加到滑塊容器中。在點擊該縮略圖圖像時，通過改變幻燈片的位置向用戶顯示相應的幻燈片。在更換滑塊位置時，滑塊容器也會以不同的級別和速度來回滑動，從而產生視差效果。

Demo

視差滑塊HTML

以下代碼顯示視差滑塊的HTML。滑塊容器元素包含滑塊圖像和縮略圖。滑塊圖像和容器背景根據縮略圖點擊事件來回移動。

<div id="parallax-slider-container" class="parallax-slider-container">
    <div class="parallax-bg"></div>
    <div>
        <ul class="parallax-slider">
            <li id="slide-1" class="slide"><img src="/slider/slide-1.jpg" /></li>
            <li id="slide-2" class="slide"><img src="/slider/slide-2.jpg" /></li>
            <li id="slide-3" class="slide"><img src="/slider/slide-3.jpg" /></li>
            <li id="slide-4" class="slide"><img src="/slider/slide-4.jpg" /></li>
            <li id="slide-5" class="slide"><img src="/slider/slide-5.jpg" /></li>
            <li id="slide-6" class="slide"><img src="/slider/slide-6.jpg" /></li>
        </ul>
        <ul class="thumb-img-container">
            <li id="1" class="thumb-img"><img src="/slider/slide-thumb-1.jpg" /></li>
            <li id="2" class="thumb-img"><img src="/slider/slide-thumb-2.jpg" /></li>
            <li id="3" class="thumb-img"><img src="/slider/slide-thumb-3.jpg" /></li>
            <li id="4" class="thumb-img"><img src="/slider/slide-thumb-4.jpg" /></li>
            <li id="5" class="thumb-img"><img src="/slider/slide-thumb-5.jpg" /></li>
            <li id="6" class="thumb-img"><img src="/slider/slide-thumb-6.jpg" /></li>
        </ul>
    </div>
</div>

用於視差滑塊的jQuery腳本

以下jQuery腳本包含創建視差滑塊的功能。在這個腳本中，它調用一個init()函數來設置所有幻燈片的位置。在縮略圖圖像的點擊事件中，它調用runSlider()函數，該函數通過控制滑塊的速度和背景位移來創建對滑動效果的視差感知。

<script>
    $(document).ready(function(){
            var sliderIndex;
            initSlider();   
            $(".thumb-img").on("click",function(){
                sliderIndex = $(this).attr("id");
                runParallax(sliderIndex);
            });                 
    });

    function runParallax(sliderIndex) {             
        var windowWidth = $(window).width();
        var slideWidth = $(".slide").width();
        var slideLeft = (windowWidth/2)-(slideWidth/2);
        var sliderImageCount = parseInt($(".slide").length); 

        if(sliderIndex>0) {
            $(".parallax-bg").css("width",sliderImageCount*windowWidth);
            $( ".parallax-bg" ).animate({
                left: "-"+parseInt((sliderIndex-1)*slideWidth)
              }, 1500 );

            for(i=1,j=sliderIndex-1;(i<=sliderIndex&&j>=1);i++,j--) {
                $("#slide-"+i).animate({left:"-"+parseInt(j*windowWidth)}, 1500);
            }
            $("#slide-"+sliderIndex).animate({left:slideLeft}, 1500);
            for(i=++sliderIndex,counter=1;i<=sliderImageCount;i++,counter++){
                $("#slide-"+i).animate({left:parseInt(counter*windowWidth)}, 1500);
            }
        }
    }

    function initSlider() {
        var windowWidth = $(window).width();
        var slideWidth = $(".slide").width();
        var slideLeft = (windowWidth/2)-(slideWidth/2);
        var sliderImageCount = parseInt($(".slide").length); 
        for(i=1;i<=sliderImageCount;i++) {
            $("#slide-"+i).css({left:(i*windowWidth)});
        }
        $("#slide-1").css("left",slideLeft+"px");
    }
</script>

Demo | 程式碼下載 Download

分享來源:jquery parallax slider