带视差滑动效果的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';        }

也许你还喜欢