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.jstxdm.com</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.jstxdm.com/" target="_blank">by js代码(www.jstxdm.com)</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仿腾讯网新闻图片特效带缩略图的幻灯片切换特效