JSFiddle代码不会转换为页面

时间:2018-03-05 04:58:14

标签: javascript jquery

我有一段时间将此代码实现到网站中。我设法让它继续使用JSFiddle,但我对大多数Javascript都相当新,并且需要对如何在页面本身的代码中链接到JSQuery进行一些澄清。

我上传的网站为HTML,CSS和JS提供了单独的标记空间。

我用JQ 3.3.1运行它。有人能帮我吗?我不确定我是否错过了带有JQ链接的正确标题,或者我错过了什么。谢谢!

JSFiddle Link HERE



var timeout;
$('#cf').mouseenter(function () {
	var i = 0;
	var loopLength = $('img').length - 1;

	for (i = 0; i < loopLength; i++) {
		(function (i) {
			timeout = window.setTimeout(function () {
				var currentImg = $('img.active');
				var nextImg;
				if (currentImg.next().length == 0) {
					nextImg = $($('img')[0]);
				} else {
					nextImg = currentImg.next();
				}
				nextImg.addClass('active');
				currentImg.removeClass('active');

			}, i * 5000);
		}(i));
	}
});

$('#cf').mouseleave(function () {
	clearTimeout(timeout);
	$('img').removeClass('active');
	$($('img')[0]).addClass('active');
});
&#13;
#cf {
  position:absolute;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  opacity:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 2s ease-in-out;
}

#cf img.active {
  opacity:1;
  z-index: 1;
}

img {
  height: 250px;
  width: 250px;
}
&#13;
<div id="cf">
<img class="active" src="https://dl.dropbox.com/s/i1s6f64stg71m47/cat02.jpg?dl=0" alt="Still Testing" /> 
<img class="" src="https://dl.dropbox.com/s/x7iciwysri2wp5p/cat01.jpg?
dl=0" alt="Testing" />
<img class="" src="https://dl.dropbox.com/s/j32l5doxt0mwccn/cat03.jpg?dl=0" alt="Testing" />
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案