如何解决简单的JQuery定时图像旋转
| 由于某些原因,以下内容无效。这很可能是我睡不着的产物,解决方案可能非常简单... JS:<script src=\"http://code.jquery.com/jquery-1.6.1.js\"> </script>
<script>
function swapImages(){
var $active = $(\'#switch .active\');
var $next = ($(\'#switch .active\').next().length > 0) ? $(\'#switch .active\').next() : $(\'#switch img:first\');
$active.fadeOut(function(){
$active.removeClass(\'active\');
$next.fadeIn().addClass(\'active\');
});
}
$(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval(\'swapImages()\',5000);
}
</script>
HTML:
<div id=\"switch\"><img src=\"images/chalk.jpg\" class=\"active\" /><img src=\"images/students.jpg\" /></div>
CSS:
#switch{
margin-left: auto;
margin-right: auto;
width: 996px;
height: 374px;
}
#switch img{
display:none;
}
#switch img.active{
display:block;
}
解决方法
我创建了一个小提琴,对我来说很好用。
我唯一更改的内容(除了为演示目的添加颜色外)是我将您的
setInterval
呼叫更改为:
setInterval(swapImages,5000);
通常,将字符串传递给setInterval
不是一个好习惯。它的工作方式类似于eval
,我们都知道这是邪恶的:)。将功能传递给它。如果您确实想做更多事情,请使用闭包(这里没有必要)。
, 有一个插件;)
http://jquery.malsup.com/cycle/lite/
它的重量很轻,并且为动画切换图像提供了一些不错的选择。
, 您在document.ready
函数末尾缺少);
,并将setTnterval
更改为实际函数。
$(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval(swapImages,1000);
});
工作示例:http://jsfiddle.net/niklasvh/4d6X5/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。