js代碼_js特效免費下載_JS特效代碼網   網頁特效   鼠標特效   js圖片相冊   js特效代碼大全
當前位置:首頁 > 網頁特效 > JS廣告代碼 > JS幻燈片

JS視差滑塊幻燈片特效

發布時間:2015-08-29 20:20:39    您是第0位瀏覽者

本js特效代碼兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等瀏覽器

JS視差滑塊幻燈片特效
<!doctype html>    
<html>    
<head>    
<title>JS視差滑塊幻燈片特效</title>    
<meta charset="utf-8">    
<link rel="stylesheet" type="text/css" href="css/jstxdm.css" />    
<script src="js/jstxdm_move.js" type="text/javascript"></script>    
<script src="js/jstxdm_index.js" type="text/javascript"></script>    
</head>    
<body>    
<div class="wrapper">    
<h1>視差滑塊 Demo www.ssbszk.live</h1>    
<h2>Create some depth with the parallax effect</h2>    
</div>    
<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>    
<div class="footer">    
<a href="http://www.ssbszk.live/" target="_blank">by js代碼(www.ssbszk.live)</a>    
</div>    
<script>    
var oLoad = getByClass(document.body, 'pxs_loading')[0];    
var oImgBox = getByClass(document.body,'pxs_slider_wrapper')[0];    
//var oEvent=ev||event;    
//var obj=oEvent.srcElement||oEvent.target;    
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';    
}    
</script>        
</body>    
</html>



幻燈片

js實現輪播幻燈片3D特效并且可以左右翻頁

js實現10屏帶縮略圖和標題的幻燈片輪播特效

JS仿360旅游首頁幻燈片效果代碼

JS帶圖片標題自動播放的幻燈片特效

JS視差滑塊幻燈片特效

jQuery自動播放淡入淡出的幻燈片特效

jquery.slider多種過渡效果的圖片輪播幻燈片特效

js仿淘寶首頁緩沖幻燈片特效

jquery實現4款自定義圖片切換幻燈片js特效

jquery仿支付寶全屏圖片幻燈片淡出淡進切換特效

jquery實現婚紗攝影網站寬屏圖片幻燈片輪播切換特效

jquery實現 ChinaJoy2014專題幻燈片特效

jQuery幻燈片插件,按鈕控制圖片過渡特效

jquery仿百度百科2014新首頁幻燈片特效

jquery實現淡出淡入帶縮略圖的廣告圖片幻燈片切換特效

jquery仿騰訊新聞網站帶縮略圖的幻燈片切換代碼_js代碼

jquery仿搜狐2014巴西世界杯專題幻燈片特效

jquery仿新浪2014成都車展幻燈片

jquery仿網易2014巴西世界杯專題幻燈片特效

jquery仿騰訊網新聞圖片特效帶縮略圖的幻燈片切換特效

鸟叔彩金