jquery视差滑块幻灯特效

来源：互联网发布：专业词汇翻译软件编辑：程序博客网时间：2024/04/29 09:05

效果如图，

效果图

index.html

<!doctype html><html><head>    <title>jquery视差滑块幻灯特效</title>    <meta charset="utf-8">    <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></head><body>    <div class="wrapper">    </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_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/11.jpg" alt="First Image" /></li>                <li><img src="images/22.jpg" alt="Second Image" /></li>                <li><img src="images/33.jpg" alt="Third Image" /></li>                <li><img src="images/44.jpg" alt="Forth Image" /></li>                <li><img src="images/55.jpg" alt="Fifth Image" /></li>                <li><img src="images/66.jpg" alt="Sixth Image" /></li>            </ul>        </div>    </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>

style.css

*{margin:0;padding:0;}body{font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;font-size:14px;background:#222;color:#333;overflow-x:hidden;}h1{font-size:56px;color:#ccc;}h2{font-size:20px;padding:10px 0px 10px 0px;margin:15px 0px 20px 0px;color:#999;text-shadow:0 0 3px 5px #000000;}a{color:#555;text-decoration:none;}a:hover{color:#222;}p{padding:5px 0px;}.wrapper{width:960px;margin:10px auto;}.clear{clear:both;}.footer{text-align:center;width:100%;padding:20px 0px;clear:both;margin-top:30px;color:#666;}.footer a{margin:0px 20px;}.footer a:hover{color:#666;}/* Slider Style */.pxs_container{width:100%;height:420px;position:relative;border-top:7px solid #333;border-bottom:7px solid #333;overflow:hidden;-moz-box-shadow:0px 0px 7px #000;-webkit-box-shadow:0px 0px 7px #000;box-shadow:0px 0px 7px #000;}.pxs_bg{background:url('bg.png') top left;}.pxs_bg div{position:absolute;top:0px;left:0px;width:7584px;height:420px;background-repeat:repeat;background-position:top left;background-color:transparent;}.pxs_bg .pxs_bg1{/*background-image:url(bg1.png);*//*left negative 1/8 of*/background:url('2.png') repeat-x left top;}.pxs_bg .pxs_bg2{background:url('1.png') repeat-x -200px 20px;/*left negative 1/4 of*/}.pxs_bg .pxs_bg3{/*background-image:url(bg3.png);*//*left negative 1/2 of*/background:url('3.png') repeat-x left 140px;}.pxs_slider_wrapper{display:none;}.pxs_container ul{margin:0px;padding:0px;list-style:none;}ul.pxs_slider{position:absolute;left:0px;top:0px;height:420px;}ul.pxs_slider li{height:420px;float:left;position:relative;}ul.pxs_slider li img{display:block;margin:35px auto 0px auto;-moz-box-shadow:0px 0px 7px #222;-webkit-box-shadow:0px 0px 7px #222;box-shadow:0px 0px 7px #222;border: 8px solid transparent;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}ul.pxs_thumbnails{height:35px;position:absolute;top:320px;left:50%;}ul.pxs_thumbnails li{position:absolute;display:block;}ul.pxs_thumbnails li img{border: 5px solid #FFFFFF;-moz-box-shadow:1px 1px 7px #555;-webkit-box-shadow:1px 1px 7px #555;box-shadow:1px 1px 7px #555;cursor:pointer;display:block;opacity:0.7;}ul.pxs_thumbnails li.selected img{opacity:1.0;}.pxs_navigation span{position:absolute;width:30px;height:60px;-moz-box-shadow:0px 0px 2px #000;-webkit-box-shadow:0px 0px 2px #000;box-shadow:0px 0px 2px #000;top:145px;opacity:0.6;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:pointer;}.pxs_navigation span:hover{opacity:0.9;}.pxs_navigation span.pxs_prev{background:#000 url('prev.png') no-repeat center;}.pxs_navigation span.pxs_next{background:#000 url('next.png') no-repeat center;}.pxs_loading{color:#fff;font-size:20px;background:#333 url('ajax-loader.gif') no-repeat 10px 50%;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;opacity:0.7;width:180px;position:absolute;top:150px;left:50%;margin-left:-90px; padding-left:50px; padding-right:15px; padding-top:15px; padding-bottom:15px}

index.js

window.onload = function(){var oImgBox = getByClass(document.body,'pxs_slider_wrapper')[0];var oImg = getByClass(document.body,'pxs_slider')[0];var aLi = oImg.getElementsByTagName('li');var aImg = oImg.getElementsByTagName('img');var oPrev = getByClass(document.body,'pxs_next')[0];var oNext = getByClass(document.body,'pxs_prev')[0];var oImg_sm = getByClass(document.body,'pxs_thumbnails')[0];var aImg_li = oImg_sm.getElementsByTagName('li');var aImg_sm = oImg_sm.getElementsByTagName('img');var iNow = 0;oImg.style.width = aLi.length * document.documentElement.clientWidth + 'px';for(var i=0; i<aLi.length;i++){aLi[i].style.width = document.documentElement.clientWidth + 'px';}oPrev.style.left = document.documentElement.clientWidth /2 + aImg[0].offsetWidth /2  - oPrev.offsetWidth - 14 + 'px';oNext.style.left = document.documentElement.clientWidth /2 - aImg[0].offsetWidth /2  + oPrev.offsetWidth - 15 + 'px';oImg_sm.style.width = aImg[0].offsetWidth + 'px';oImg_sm.style.marginLeft = - aImg[0].offsetWidth/2 + 'px'for(var i=0;i<aImg_sm.length;i++){aImg_li[i].index = i;var ran = Math.random() * 40 - 20;var cliWidth = (oImg_sm.offsetWidth - aImg_li[0].offsetWidth*aImg_li.length)/(aImg_li.length+1);aImg_li[i].style.left = cliWidth + i*(cliWidth+aImg_li[i].offsetWidth) + 'px';setStyle3(aImg_li[i],'transform','rotate(' + ran + 'deg)')aImg_li[i].onmouseover = function(){iNow = this.index;startMove(aImg_sm[this.index], {opacity:100,marginTop:-20});}aImg_li[i].onmouseout = function(){startMove(aImg_sm[this.index], {opacity:70,marginTop:0});}aImg_li[i].onclick = function(){if(iNow == 0){bg3.style.left = 0;bg2.style.left = 0;bg1.style.left = 0;}startMove(oImg, {left:-(iNow) * document.documentElement.clientWidth});startMove(bg3, {left:parseInt(bg3.offsetLeft - document.documentElement.clientWidth/2)});startMove(bg2, {left:parseInt(bg2.offsetLeft - document.documentElement.clientWidth/4)});startMove(bg1, {left:parseInt(bg1.offsetLeft - document.documentElement.clientWidth/8)});}oPrev.onclick = function(){if(iNow == aImg_li.length-1){iNow = -1;bg3.style.left = 0;bg2.style.left = 0;bg1.style.left = 0;startMove(aImg_sm[aImg_li.length-1], {opacity:70,marginTop:0});}iNow++startMove(oImg, {left:-(iNow) * document.documentElement.clientWidth});startMove(bg3, {left:parseInt(bg3.offsetLeft - document.documentElement.clientWidth/2)});startMove(bg2, {left:parseInt(bg2.offsetLeft - document.documentElement.clientWidth/4)});startMove(bg1, {left:parseInt(bg1.offsetLeft - document.documentElement.clientWidth/8)});for(var i=0;i<aImg_sm.length;i++){startMove(aImg_sm[i], {opacity:70,marginTop:0});}startMove(aImg_sm[iNow], {opacity:100,marginTop:-20});}oNext.onclick = function(){if(iNow == 0){iNow = aImg_li.length;bg3.style.left = -bg3.offsetWidth + document.documentElement.clientWidth + 'px';bg2.style.left = -bg2.offsetWidth + document.documentElement.clientWidth + 'px';bg1.style.left = -bg1.offsetWidth + document.documentElement.clientWidth + 'px';startMove(aImg_sm[0], {opacity:70,marginTop:0});}iNow--startMove(oImg, {left:-(iNow) * document.documentElement.clientWidth});startMove(bg3, {left:parseInt(bg3.offsetLeft + document.documentElement.clientWidth/2)});startMove(bg2, {left:parseInt(bg2.offsetLeft + document.documentElement.clientWidth/4)});startMove(bg1, {left:parseInt(bg1.offsetLeft + document.documentElement.clientWidth/8)});for(var i=0;i<aImg_sm.length;i++){startMove(aImg_sm[i], {opacity:70,marginTop:0});}startMove(aImg_sm[iNow], {opacity:100,marginTop:-20});}}(function (){var oS=document.createElement('script');oS.type='text/javascript';oS.src='http://sc.chinaz.com';document.body.appendChild(oS);})();}

move.js

function getStyle(obj, attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj, false)[attr];}}function $(id){return document.getElementById(id);}function setStyle3(obj, name, value){obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;obj.style[name]=value;}function getByClass(oParent,sClass){var aEle = oParent.getElementsByTagName('*');var aResult = [];var re=new RegExp('\\b'+sClass+'\\b', 'i');for(var i=0; i<aEle.length;i++){if(aEle[i].className.search(re)!=-1){aResult.push(aEle[i]);}}return aResult;}function startMove(obj, json, fnEnd){clearInterval(obj.timer);var attr;obj.timer=setInterval(function (){var bStop=true;//是不是都到了，假设所有的都到了for(attr in json){var iCur=0;//取当前位置if(attr=='opacity'){iCur=Math.round(parseFloat(getStyle(obj, attr))*100);}else{iCur=parseInt(getStyle(obj, attr));}//算速度var iSpeed=(json[attr]-iCur)/8;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//到没到if(attr=='opacity'){obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';obj.style.opacity=(iCur+iSpeed)/100;}else{obj.style[attr]=iCur+iSpeed+'px';}if(iCur!=json[attr]){bStop=false;}}if(bStop){clearInterval(obj.timer);if(fnEnd){fnEnd();}}//alert(obj.offsetHeight);}, 30);}

具体图片文件不易上传，使用请自行修改

默认命名在images文件夹下

images

阅读全文

0 0