滚动时更改背景图像

Question

＆＃13;

＆＃13;

frame.setGlassPane(playerPanel);
frame.getGlassPane().setVisible(true);

＆＃13;

var swap;
function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    var swap = window.setInterval(func, interval);
}

run(1000, 10);


$(window).scroll(function(){
    //... your logic goes here...
    $("body").css("background-image", "background-image: url(1.jpg)");
    if(youWantToStopTheInterval){
        window.clearInterval(swap);
        $("body").css("background-image", "background-image: url(1.jpg)");
    }
});

＆＃13;

html * {
  box-sizing: border-box;
  padding:0;
  margin:0;
}
html,
body {
  height: 100%;
    font-family: 'Roboto', sans-serif;
    color:#666666;
    line-height: 1.7em;
    
}

#b1 {/* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b2 {/* Location of the image */
  background-image: url(2.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b3 {/* Location of the image */
  background-image: url(3.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}

#b4 {/* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b5 {/* Location of the image */
  background-image: url(2.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b6 {/* Location of the image */
  background-image: url(3.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b7 {/* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b8 {/* Location of the image */
  background-image: url(2.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b9 {/* Location of the image */
  background-image: url(3.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b10 {/* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#full_2, #full_3, #full_4{
  position: relative;
  height: 100vh;
  width: 100%;
}

#full_1 {
  position: relative;
  height: 100vh;
  width: 100%;
}
#full_1 {
  background: black;
  opacity: 0.36;
}
#full_4 {
  background: magenta;
    opacity: 0.1;
}
#full_2 {
  background: white;
}
#full_3 {
  background: lightgray;
}
.arrow-down {
  position: absolute;
  bottom: 10px;
  width: 45px;
  height: 45px;
  left: calc(50% - 16px);
}
.arrow-down a img {
  width: 100%;
}

.main-nav ul li.menu-item{
    display: none;
}

.logo{float: left; width: 15%;height: 100%;padding-top: 25px;padding-left: 25px;}

.main-nav {float: right; width: 80%; height: 100%;}

.menu {
  background-color: #373737;
  left: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
z-index: 5;
}

#main-header a{
    text-decoration: none;
    color: #ffffff;
    font-size:1.5em;
    z-index: 10;
    opacity: 1;
}

#main-header a:hover{
    color: #FFD200;
}

#main-header {
    position: absolute;
    width:100%;
    height:70px;
    top:0;
    background-color: rgba(0,0,0,0);
    z-index: 100;
}

#main-header ul li {
    display:inline;
    padding:20px 20px;
}

#main-header ul {
    float: right;
    margin-top:0px;
    padding:0;
    padding-top: 25px;
    padding-right: 25px;
    text-align: right;
}

#container{
    width: 90%;
}

#lupa{
    float: right;
    width: 40%;
    height: 100%;
}

#lupa img{516 918
    width: 90px;
    height: 492px;
    float: right;
    padding-top: 90px;
}

#content_1{
    
    float: left;
    height: 100%;
    width: 60%;
    
}

#content_container{
    padding-top: 125px;
    height: 100%;
    width: 100%;
    padding-left: 35%;
}

#nadpis1{
    
    
    margin-bottom: 45px;
    
}

#nadpis1 img{
    width: 231px;
    height: 44px;
}

#content_1_1 a{
    color: #014FC4;
    text-decoration: none;
    font-weight: 800;
    font-size: 25px;
}

#content_1_1 h2, p{
    color: #2F2F2F;
    font-size: 25px;
    text-decoration: none;
}
#footer_left{
    height: 90%;
    float: left;
    width: 40%;
}
.footer_1, .footer_2{
    height: 100%;
    width: 50%;
}

.footer_1{
    float: left;
}

.footer_2{
    float:right;
}

.footer_3{
    
}

#full_5{
    height:50vh;
    background-color: #0F032D;
    bottom: 0;
}

.footer_bottom{
    color: white;
    height: 10%;
    width: 100%;
    text-align: center;
    clear: both;
    bottom: 0;
    padding-bottom: 10px;
    z-index: 10;
}



#full_5 ul{
    padding-right: 25px;
    padding-top: 25px;
}

#full_5 ul li{
    padding-top: 25px;
}

#full_5 ul li a{
    color: white;
    text-decoration: none;
    font-size: 16px;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
    html * {
  box-sizing: border-box;
  padding:0;
  margin:0;
}
html,
body {
  height: 100%;
    font-family: 'Roboto', sans-serif;
    color:#666666;
    line-height: 1.7em;
    
}
#b1 {/* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b2 {/* Location of the image */
  background-image: url(2.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b3 {/* Location of the image */
  background-image: url(3.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}

#full_2, #full_3, #full_4{
  position: relative;
  height: 100vh;
  width: 100%;
}

#full_1 {
  position: relative;
  height: 100vh;
  width: 100%;
}
#full_1 {
  background: black;
  opacity: 0.36;
}
#full_4 {
  background: magenta;
}
#full_2 {
  background: white;
}
#full_3 {
  background: lightgray;
}
.arrow-down {
  position: absolute;
  bottom: 10px;
  width: 45px;
  height: 45px;
  left: calc(50% - 16px);
}
.arrow-down a img {
  width: 100%;
}

#full_2 .arrow-down a img {
width: 100%;
display: none;
}

.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}

.main-nav {float: right; width: 60%; height: 100%;}

.menu {
  background-color: #373737;
  left: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
z-index: 5;
}

#main-header a{
    text-decoration: none;
    color: #ffffff;
    font-size:2.0em;
    z-index: 10;
    opacity: 1;
}

#main-header a:hover{
    color: #585858;
}

#main-header {
    position: absolute;
    width:100%;
    height:70px;
    top:0;
    background-color: rgba(0,0,0,0);
    z-index: 100;
}

#main-header ul li {
    display:inline;
    padding:20px 20px;
}

#main-header ul {
    float: right;
    margin-top:0px;
    padding:0;
    padding-top: 25px;
    padding-right: 25px;
    text-align: right;
}

#container{
    width: 95%;
    margin-right: auto;
    margin-left: auto;
}

#lupa{
    text-align: center;
    width: 100%;
    height: 100%;
    float: none;
}

#lupa img{516 918
    width: 90px;
    height: 492px;
    float: none;
    padding-top: 0px;
}

#content_1{
    
    height: 100%;
    width: 100%;
    text-align: center;
}

#content_container{
    padding-top: 100px;
    height: 100%;
    width: 100%;
    padding-left: 0px;
    margin-bottom: 20px;
}

#nadpis1{
    margin-bottom: 45px;    
}

#nadpis1 img{
    width: 231px;
    height: 44px;
}

#content_1_1 a{
    color: #014FC4;
    text-decoration: none;
    font-weight: 800;
    font-size: 25px;
}

#content_1_1 h2, p{
    color: #2F2F2F;
    font-size: 25px;
    text-decoration: none;
}
}

＆＃13;

＆＃13;

＆＃13;

我知道，这个问题已被问过很多次了，但没有一个答案适合我，因为它涉及许多其他问题......

我有代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Add gospel</title>
        <link href="styles.css" rel="stylesheet" type="text/css">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link
	href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,cyrillic-ext'
	rel='stylesheet' type='text/css'>
    </head>
    <div class="menu" >
    </div>
    <div id="wrapper">
        <div id="main-header">
				<div class="logo">
					<a href="http://david.addagio.cz/gospel"><img src="logo.png"
						style="max-width: 90%; height: auto;" alt="gospel logo" /></a>
				</div>
				<!--/.logo-->
				<div class="main-nav">
					<nav class="nav">
						<ul>
							<li class="nav-item"><a href="index.php">Aktuálně</a></li>
							<li class="nav-item"><a href="#content_1">O nás</a></li>
							<li class="nav-item"><a href="#full_3">Kontakt</a>
                            <li class="nav-item"><a href="#full_4">Foto/Video</a>
                            <li class="menu-item"><a href="#full_4">MENU</a>
						</ul>
					</nav>
				</div>
        </div>
            <div id="full_1">
          <div class="arrow-down">
            <a href="#full_2"><img src="arrow_down.png" alt="arrow-down"></a>
          </div>
        </div>
        <div id="full_2">
            <div id="container">
                <div id="content_1">
                    <div id="content_container">
                    <div id="nadpis1">
                        <img src="where.png" alt="where">
                    </div>
                    
                    <div id="content_1_1">
                        <p>Už z našeho jména vyplívá, že se nacházíme
                        ve městě Přerov. Klikněte na lupu a získáte
                        přesnou navigaci.
                        
                        Jsme od Vás příliš daleko?
                            kontaktujte nás <a href="index.html">zde</a></p>
                    </div>
                    </div>
                </div>
                
                <div id="lupa">
                    <a href="https://www.google.cz/maps/place/%C4%8C.+Drahlovsk%C3%A9ho+912%2F1,+750+02+P%C5%99erov/@49.4515655,17.4449138,18.34z/data=!4m2!3m1!1s0x4713aea3e8cce151:0xac1b8237ae516d54!6m1!1e1" target="_blank"><img src="lupa.png"></a>
                </div>  
        </div>        
          <div class="arrow-down">
            <a href="#full_3"><img src="arrow_down_black.png" alt="arrow-down"></a>
          </div>
        </div>
        <div id="full_3">
          <div class="arrow-down">
            <a href="#full_4"><img src="arrow_down.png" alt="arrow-down"></a>
          </div>
        </div>
        <div id="full_4">
          <div class="arrow-down">
            <a href="#full_5"><img src="arrow_down.png" alt="arrow-down"></a>
          </div>
        </div>
        
        <div id="full_5">
        <div id="footer_left">
        <div class="footer_1">
            <ul>
            <li><a href="#full_1">Podmínky použití</a></li>   
            <li><a href="#full_1">Kontakty</a></li>
            <li><a href="#full_1">Novinky</a></li>
            <li><a href="#full_1">Fotky</a></li>
            </ul>
        </div>
            
        <div class="footer_2">
            
        </div>
        </div>    
        <div class="footer_3">
            
        </div>
            
        <div class="footer_bottom">
        
        </div>
        </div>
        
    </div>
        
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="main.js">
            
            
            
        </script>
    </body>
</html>

该代码每1秒更改一次网站的背景图片（将其更改10秒，然后再次更改..）。

现在，我想改变背景图像，当用户向下滚动约100vh时，它必须停止代码，即每秒改变背景....

这就是我可能会这样，但它不起作用：

function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    var swap = window.setInterval(func, interval);
}

run(1000, 10); //milliseconds, frames

link to the website

任何想法？

注意：！它不是重复的！

Answer 1

首先，您需要收听window.scroll事件，不至document.ready，因为每次滚动窗口时window.scroll都会触发，document.ready 1}}一次，当文件是......好......准备好了:-) 有关$.scroll documentation

中scroll事件的更多信息

然后，您需要将代码中的intervalId（swap，我的intervalId）分配给run函数范围之外的变量，这样当用户向下滚动时够了，你决定要停止间隔机制，你可以做到

var intervalId;
function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    intervalId = window.setInterval(func, interval);
}

run(1000, 10);


$(window).scroll(function(){
    //... your logic goes here...
    if(youWantToStopTheInterval){
        window.clearInterval(intervalId);
    }
});

aaand ... VOILA！