带视差滑动效果的js幻灯特效代码

带视差滑动效果的js幻灯特效代码386
一款漂亮精致的js幻灯特效代码,带背景视差滚动效果,响应式全屏自适应宽度,支持左右箭头控制幻灯图轮播,
引用js和css文件
    <link rel="stylesheet" type="text/css" href="images/style.css" />
    <script src="images/move.js" type="text/javascript"></script>
    <script src="images/index.js" type="text/javascript"></script>
HTML标记
<div id="pxs_container" class="pxs_container">
        <div class="pxs_bg">
            <div class="pxs_bg1">
            </div>
            <div class="pxs_bg2">
            </div>
            <div class="pxs_bg3">
            </div>
        </div>
        <div class="pxs_loading">
            Loading images...</div>
        <div class="pxs_slider_wrapper">
            <ul class="pxs_slider">
                <li>
                    <img src="images/1.jpg" alt="First Image" /></li>
                <li>
                    <img src="images/2.jpg" alt="Second Image" /></li>
                <li>
                    <img src="images/3.jpg" alt="Third Image" /></li>
                <li>
                    <img src="images/4.jpg" alt="Forth Image" /></li>
                <li>
                    <img src="images/5.jpg" alt="Fifth Image" /></li>
                <li>
                    <img src="images/6.jpg" alt="Sixth Image" /></li>
            </ul>
            <div class="pxs_navigation">
                <span class="pxs_next"></span><span class="pxs_prev"></span>
            </div>
            <ul class="pxs_thumbnails">
                <li>
                    <img src="images/thumbs/1.jpg" alt="First Image" /></li>
                <li>
                    <img src="images/thumbs/2.jpg" alt="Second Image" /></li>
                <li>
                    <img src="images/thumbs/3.jpg" alt="Third Image" /></li>
                <li>
                    <img src="images/thumbs/4.jpg" alt="Forth Image" /></li>
                <li>
                    <img src="images/thumbs/5.jpg" alt="Fifth Image" /></li>
                <li>
                    <img src="images/thumbs/6.jpg" alt="Sixth Image" /></li>
            </ul>
        </div>
    </div>
JS调用
   var oLoad = getByClass(document.body, 'pxs_loading')[0];
        var oImgBox = getByClass(document.body, 'pxs_slider_wrapper')[0];
        var imgs = document.getElementsByTagName('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onload = function () {
                oLoad.style.display = 'none';
            }
            oImgBox.style.display = 'block';
        }

也许你还喜欢