利用CSS固定背景交替实现视差滚动效果

利用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;
}
a{
 color:#555;
 text-decoration:none;
}
a:hover{
 color:#222;
}
p{
 padding:5px 0px;
}
.wrapper{
 width:960px;
 margin:100px auto 20px;
 text-align: center;
}
.clear{
 clear:both;
}
.footer{
 text-align:center;
 width:100%;
 padding:20px 0px;
 clear:both;
 margin-top:30px;
}
.footer a{
 margin:0px 20px;
}

.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:transparent url(../images/bg.png) repeat 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(../images/bg1.png);

}
.pxs_bg .pxs_bg2{
 background-image:url(../images/bg2.png);
 
}
.pxs_bg .pxs_bg3{
 background-image:url(../images/bg3.png);
 
}
.pxs_slider_wrapper{
 display:none;
}
.pxs_container ul{
 margin:0px;
 padding:0px;
 list-style:none;
}
ul.pxs_slider{
 position:absolute;
 left:0px;
 top:0px;
 
}
ul.pxs_slider li{
 
 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(../images/prev.png) no-repeat center center;
}
.pxs_navigation span.pxs_next{
 background:#000 url(../images/next.png) no-repeat center center;
}
.pxs_loading{
 color:#fff;
 font-size:20px;
 padding:15px 15px 15px 50px;
 position:absolute;
 background:#333 url(../images/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;
}
html及js部分


   
       
       
       
       
  
       
       
  
  
  
   
   
  

  

   

    

    

    

   

   

Loading images...

   

    

     
• 

     
• 

     
• 

     
• 

     
• 

     
• 

    

    

     
     
    

    

     
• 

     
• 

     
• 

     
• 

     
• 

     
•