Скрипт плавной смены фона! переход на др страницу

@darkavenger1 · Регистрация: 02.08.2012

Author24 — интернет-сервис помощи студентам

Как сделать, когда переходишь на другую страницу, прокрутка изображений начиналась с того изображения, на котором остановилась на предыдущей странице?

xfade.js

Javascript

var bg = {
            '1':['/index.shtml','bg1'],
            '2':['/index.shtml','bg2'],
            '3':['/index.shtml','bg3'],
            '4':['/index.shtml','bg4'],
            '5':['/index.shtml','bg5']
        };
 
        $(document).ready(function() {
            xfade({
                fade      :1000,
                rotate    :10000,
                container :'xfader',
            });
        });
 
function xfade(hash){var ind = 1;var ind2 = 1;try{if(!hash){hash={fade:1000,rotate:3500}}if(hash["fade"]>hash["rotate"]){hash["fade"]=hash["rotate"]}if(bg){var order=[];var i=0;for(k in bg){order[i]=k;i++}$('#'+hash["container"]).html('<div id="xfade"><div id="main-fade" class="rotate '+bg[order[0]][1]+'">&nbsp;</div><div id="slave-fade" class="rotate '+bg[order[1]][1]+'">&nbsp;</div></div>');
 
    setInterval(function(){
        
        ind++;
        if( ind >= order.length ){ ind = 0 }
        
        if( $('#main-fade').css('opacity') == 1 ){
            
            $('#slave-fade').animate({opacity:1},hash["fade"]);
            $('#main-fade').animate({opacity:0},hash["fade"]);
            
            
            setTimeout(function(){
                
                $('#main-fade').attr('class','rotate '+bg[order[ind]][1]);
                
            },hash["fade"]+10);
            
        } else {
            
            $('#slave-fade').animate({opacity:0},hash["fade"]);
            $('#main-fade').animate({opacity:1},hash["fade"]);
            
            setTimeout(function(){
                
                $('#slave-fade').attr('class','rotate '+bg[order[ind]][1]);
                
            },hash["fade"]+10);
 
        }
        
    }, hash["rotate"] );
    
    }   
}catch(err){}}

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/JavaScript" src="js/jquery-1.4.2.js"></script>
    <script type="text/JavaScript" src="js/xfade.js"></script>
    </script>
</head>
<body>
    <div id="xfader" class="bg">
    </div>
</body>
</html>

style.css

CSS

#xfader
{
  position: absolute;
  overflow: auto;
  margin: 0;
  width: 100%;
  height: 100%;
  min-width:1100px;
  min-height:800px;
}
.rotate{
    width: 100%;
    height: 100%;
}
 
#main-fade ,#slave-fade{position:absolute;left:0;}#slave-fade {z-index:1;}
#main-fade{z-index:2;}
 
.bg1{background:url(../img/bg/1.jpg) top left no-repeat;}
.bg2{background:url(../img/bg/2.jpg) top left no-repeat;}
.bg3{background:url(../img/bg/3.jpg) top left no-repeat;}
.bg4{background:url(../img/bg/4.jpg) top left no-repeat;}
.bg5{background:url(../img/bg/5.jpg) top left no-repeat;}
 
 
.bg1,.bg2,.bg3,.bg4,.bg5
{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;  /* Internet Explorer 7/8 */
}

	04.01.2013, 15:43