一款漂亮精致的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';
}