模块内简单的函数调用,获得NaN的,是吧?

这里是我工作的模块:

var FeatureRotator = (function($,global) { var self = {}, currentFeature = 0, images = [], imagePrefix = "/public/images/features/", timer = null, totalImages = 0, initialFeature, interval, blendSpeed, element = null, img1 = null, img2 = null; function setVisibleImage(iid) { $("#img1").attr('src',images[iid].src).css('opacity',1); $("#img2").css('opacity',0); $(".active").removeClass("active"); $("#f"+iid).addClass("active"); } function setCurrentImage(id) { currentFeature = id; setVisibleImage(id); } function doHoverIn(position) { if (currentFeature === position) { self.pause(); } else { setCurrentImage(global.parseInt(position, 10)); self.pause(); } } function doHoverOut(position) { self.unpause(); } self.init = function(options,callback) { var i = 0, tempImg = null; interval = options.interval || 5000; blendSpeed = options.blendSpeed || 500; element = options.element; initialFeature = options.initialFeature || 0; img1 = $("<img/>").attr('id','img1'); img2 = $("<img/>").attr('id','img2').css('opacity','0').css('margin-top',-options.height); $(element).append(img1).append(img2); totalImages = $(".feature").size(); for (i = 0;i < totalImages; i++) { tempImg = new global.Image(); tempImg.src = imagePrefix +"feature_" + i + ".png"; images.push(tempImg); $("#f"+i).css('background-image', 'url("'+imagePrefix+"feature_"+i+"_thumb.png"+'")') .hover(doHoverIn($(this).attr('position')) , doHoverOut($(this).attr('position')) ).attr('position',i); } setVisibleImage(initialFeature); if (options.autoStart) { self.start(); } if (callback !== null) { callback(); } }; function updateImage() { var active = $("#img1").css('opacity') === 1 ? "#img1" : "#img2"; var nextFeature = (currentFeature === totalImages-1 ? 0 : currentFeature+1); if (active === "#img1") { $("#img2").attr('src',images[nextFeature].src); $("#img2").fadeTo(blendSpeed, 1); $("#img1").fadeTo(blendSpeed, 0); } else { $("#img1").attr('src',images[nextFeature].src); $("#img1").fadeTo(blendSpeed, 1); $("#img2").fadeTo(blendSpeed, 0); } $("#f"+currentFeature).removeClass("active"); $("#f"+nextFeature).addClass("active"); currentFeature = nextFeature; } self.start = function() { currentFeature = initialFeature; setVisibleImage(currentFeature); timer = global.setInterval(function(){ updateImage(); }, interval); }; self.pause = function() { global.clearTimeout(timer); }; self.unpause = function() { timer = global.setInterval(function(){ updateImage(); }, interval); }; return self; }(this.jQuery, this));

这里是它是如何在页面上使用:

<script type="text/javascript"> // ... $(function() { FeatureRotator.init({ interval:5000, element:'#intro', autoStart:true, height:177, blendSpeed:1000, initialFeature:0 }); }); </script>

问题是,当setVisibleImage从init方法调用,IID的值是NaN。 我已经通过调试加强并验证“initialFeature'为0时,setVisibleImage函数被调用,但很可惜,该值不让它在那儿。

谁能帮我确定问题是什么? 我已经运行过的JSLint的代码,它回来了干净。

UPDATE

确定这里是我更新的代码,现在该功能除了褪色不工作,图像翻转刚刚到下一个,不褪色顺利了:

var FeatureRotator = (function($,global) { var self = {}, currentFeature = 0, images = [], imagePrefix = "/public/images/features/", timer = null, totalImages = 0, initialFeature = 0, interval, blendSpeed; function setVisibleImage(iid) { $("#img1").attr('src',images[iid].src).css('opacity',1); $("#img2").css('opacity',0); $(".active").removeClass("active"); $("#f"+iid).addClass("active"); } function setCurrentImage(id) { currentFeature = id; setVisibleImage(id); } function doHoverIn(obj) { var position = global.parseInt(obj.target.attributes["position"].value,10); if (currentFeature === position) { self.pause(); } else { setCurrentImage(global.parseInt(position, 10)); self.pause(); } } function doHoverOut() { self.unpause(); } self.init = function(options,callback) { var i = 0, tempImg = null, element = null, img1 = null, img2 = null; interval = options.interval || 5000; blendSpeed = options.blendSpeed || 500; element = options.element; initialFeature = options.initialFeature || 0; img1 = $("<img/>").attr('id','img1'); img2 = $("<img/>").attr('id','img2').css('opacity','0').css('margin-top',-options.height); $(element).append(img1).append(img2); totalImages = $(".feature").size(); for (i = 0;i < totalImages; i++) { tempImg = new global.Image(); tempImg.src = imagePrefix +"feature_" + i + ".png"; images.push(tempImg); $("#f"+i).css('background-image','url("'+imagePrefix+"feature_"+i+"_thumb.png"+'")') .hover(doHoverIn, doHoverOut) .attr('position',i); } setVisibleImage(initialFeature); if (options.autoStart) { self.start(); } if (typeof callback === "function") { callback(); } }; function updateImage() { var active = $("#img1").css('opacity') === 1 ? "#img1" : "#img2"; var nextFeature = (currentFeature === totalImages-1 ? 0 : currentFeature+1); if (active === "#img1") { $("#img2").attr('src',images[nextFeature].src); $("#img2").fadeTo(blendSpeed, 1); $("#img1").fadeTo(blendSpeed, 0); } else { $("#img1").attr('src',images[nextFeature].src); $("#img1").fadeTo(blendSpeed, 1); $("#img2").fadeTo(blendSpeed, 0); } $("#f"+currentFeature).removeClass("active"); $("#f"+nextFeature).addClass("active"); currentFeature = nextFeature; } self.start = function() { currentFeature = initialFeature; setVisibleImage(currentFeature); timer = global.setInterval(function(){ updateImage(); }, interval); }; self.stop = function() { global.clearTimeout(timer); }; self.pause = function() { global.clearTimeout(timer); }; self.unpause = function() { timer = global.setInterval(function(){ updateImage(); }, interval); }; return self; }(this.jQuery, this));

--------------解决方案-------------

既然你得到NaN ,我猜它实际上正在从这一行:

.hover(doHoverIn($(this).attr('position'))

...调用该:

setCurrentImage(global.parseInt(position, 10)); // note the parseInt()

...调用该:

setVisibleImage(id);

所以position传递给parseInt是来自$(this).attr('position')这很可能是不能被解析成一个号码,这样你会得到一个值NaN

检查出的块的第一行的属性值for语句。

for (i = 0;i < totalImages; i++) {
console.log( $(this).attr('position') ); // verify the value of position
// ...

分类:JavaScript的 时间:2015-03-15 人气:0
本文关键词: JavaScript中,南
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.836 (s). 10 q(s)