我在写一个类似轮播的组件，一个容器中图片放大到一个值后换一个图片，继续放大，重复这个过程用了requireJS<script src="https://cdn.bootcss.com/require.js/2.3.4/require.js" data-main="js/main"></script>
<div id="cover">
<div id="imgBox">
<img src="images/6979b974a51a5fa66c22db8fa9feff5c.jpg">
</div>
</div>main.jsrequire(["./config"], function(){
require(["jquery"], function($){
require(["./carousel"], function(autoPlay){
var img = $("img");
autoPlay(img);
})
});
});carousel.jsdefine(function(){
var pathArr = [
"images/0fad76a6669a0bc9dcac0f2bbcfac612.jpg",
"images/6b44f9a15afb4b64a381595223cbd436.jpg",
"images/6979b974a51a5fa66c22db8fa9feff5c.jpg",
"images/e74b72fe6e3b58511faf41d89bc2ce38.jpg"
];
var autoPlay = function(img){
var imgOriginWidth = img.width();
var imgFinalWidth = imgOriginWidth + 100;
var imgOriginHeight = img.height();
// 等比缩放
var imgFinalHeight = (imgFinalWidth * imgOriginHeight)/imgOriginWidth;
var i = 4;
var counter = 0;
// while(counter < i){
if(img.width() < imgFinalWidth){
img.stop().animate({
width: "+=100px",
height: "+=" + (imgFinalHeight - imgOriginHeight) + "px",
left: "-=50px",
top: "-=50px"
}, 1000, function(){
currentIndex = pathArr.indexOf(img.attr("src"));
img.attr("src", pathArr[currentIndex + 1]);
img.css({
width: imgOriginWidth + "px",
height: imgOriginHeight + "px",
left: "0px",
top: "0px"
});
counter++;
console.log("执行");
});
}
//}
}
return autoPlay;
})我在回调函数中递增了计数器啊，为什么还会卡死。
添加回答
举报
0/150
提交
取消