无限循环jquery无法正常工作

时间:2015-11-10 12:25:27

标签: javascript jquery loops for-loop

我做这个简短。我在这里看了几个与此相关但没有好处的主题。这是代码; CSS,JS,HTML。我需要和无限循环,并认为我已经使用第一个JS脚本实现了一个。



$(document).ready(function() {
	
	
	fadeLength = 2,
	fadeDelay = 6,
	fadeTime = fadeLength * 2000,
	delayTime = fadeDelay * 6000,
	totalTime = fadeTime delayTime,
	allElems,
	elemNoFade,
	i,
	fadingElem;
	
	for (i = 0, allElems = $('.toBeFaded').length, elemNoFade = allElems - 1; i < allElems; i = 1) {
		fadingElem = "#elem" + i;
		if (i === 0) {
			$(fadingElem).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
		} else if (i === elemNoFade) {
			$(fadingElem).delay(totalTime * i).fadeIn(fadeTime);
		} else {
			$(fadingElem).delay(totalTime * i).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
		  }  
	    };
});

//Thought the above would give me the infinite loop.

$(document).ready(function() { 
		
	$("#elem0").fadeIn(2000).delay(4000).fadeOut(1000);
	$("#elem1").delay(6000).fadeIn(2000).delay(4000).fadeOut(1000);
	$("#elem3").delay(12000).fadeIn(2000).delay(4000).fadeOut(1000);
	$("#elem4").delay(18000).fadeIn(2000).delay(4000).fadeOut(1000);
	$("#elem5").delay(24000).fadeIn(2000).delay(4000).fadeOut(1000);
	});
&#13;
.toBeFaded {
  position:absolute;
  top:12%;
  left:30%;
  max-width:100%;
  height:640px;
  display:none;
}
.image-box {
  max-width:480px;
  height:640px;
  background:rgb(240,240,255);
  -webkit-box-shadow:12px -3px 12px #000,0 0 15px #666 inset;
  box-shadow:12px -3px 12px #000,0 0 15px #666 inset;
  margin:4.2% 0 0 29.3%;
  border:8px double #000;
  overflow:hidden;
}
&#13;
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Beta ttc1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./assets/styles/css/ttc-main.css">
<!--//SCRIPTS BEGIN\\-->

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="./assets/javascript/pacs.fade.gal.js"></script> 
<script src="./assets/javascript/fadein.out.js"></script> 
</head>

<body>

<div class="wrapper">
 
  <h1>Tamtam's Closet</h1>
   
    <div class="image-box">

	  <img id="elem0" src="image170.jpg" class="toBeFaded" alt="">
	   <img id="elem1" src="image176.jpg" class="toBeFaded" alt="">
        <img id="elem2" src="image175.jpg" class="toBeFaded" alt="">
         <img id="elem3" src="image172.jpg" class="toBeFaded" alt="">
          <img id="elem4" src="image173.jpg" class="toBeFaded" alt="">
           <img id="elem5" src="image174.jpg" class="toBeFaded" alt="">
         
		     </div>



<h4><small><small><a href="https//tamtamsclosetcom1.ipage.com"></a>
</div>
 

 
</body>
</html>
&#13;
&#13;
&#13;   我对javascript / jquery不是很有经验,但是当我打算将它整合到我们的商店时,我觉得我真的需要学习这些东西。 这件事有效,但只运行一次。提前谢谢

0 个答案:

没有答案