javascript - Jquery Delay and more -


i [have/want] make storytelling website like:

http://www.bizbrain.org/coffee/

1) guys creat every object in css or frame frame in photoshop?

2) why doesnt delay work? (yes tested higher delay aswell 5000)(code below the line)

3) how bind stylesheet.css file if move \misc\style folder? tried:

<link rel="stylesheet" href="\misc\style\stylesheet.css">  <link rel="stylesheet" href=".\misc\style\stylesheet.css">  <link rel="stylesheet" href=".misc\style\stylesheet.css">    <link rel="stylesheet" href="/misc/style/stylesheet.css">  <link rel="stylesheet" href="./misc/style/stylesheet.css">  <link rel="stylesheet" href=".misc/style/stylesheet.css">

_________________________________________________________________________________  ^the line 

test.js

$(document).ready(function(){   	var n = 1;	  	for(i = 1; < 30; i++){  		changepicture();  	}  	function changepicture(){  		n+=1;  		$('.p').delay(33).css('background-image', 'url("misc/bilder/'+n+'.png")');		  	}	  });

stylesheet.css

* {  	margin: 0;  	padding: 0;  	border: 0;  	height: 1000%;  }  .p{  	height: 100%;      width: 100%;  	position:relative;  	padding: 25%;  	background-size:cover;  	background-attachment:fixed;  	-webkit-transition: 0.2s ease;  	-moz-transition: 0.2s ease;  	transition: 0.2s ease;  	background-image: url("misc/bilder/1.png");      }

index.html

<!doctype html>  <html>  <head>  <link rel="stylesheet" href="\misc\style\stylesheet.css">  <title>evolution des menschen</title>  </head>  <body>  	<div class="p"></div>	  <script type="text/javascript" src="misc/js/jquery-3.1.0.min.js"></script>  <script type="text/javascript" src="misc/js/test.js"></script>  </body>  </html>

as can tell code have no webdesign experience in advance

$(document).ready(function(){    var delay = 33;   changepicture(1, 30, 'misc/bilder', '.png')    function changepicture(next, last, path, extension){     if (next <= last){       settimeout(function(){         $('.p').css('background-image', 'url("' + path + '/' + next + extension + '")');         next += 1;         changepicture(next, last, path, extension)       }, delay);     }      } }); 

Comments