我有一段时间将此代码实现到网站中。我设法让它继续使用JSFiddle,但我对大多数Javascript都相当新,并且需要对如何在页面本身的代码中链接到JSQuery进行一些澄清。
我上传的网站为HTML,CSS和JS提供了单独的标记空间。
我用JQ 3.3.1运行它。有人能帮我吗?我不确定我是否错过了带有JQ链接的正确标题,或者我错过了什么。谢谢!
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;