试图拿出非常简单的图像旋转使用纯JavaScript没有jQuery。简单的图像旋转与纯JavaScript，没有jQuery
一些我可以这样称呼的东西，它可以将图像放在同一个地方，一个接一个地旋转。
rotator('<a href="link1"><img src="image1.gif"/ ></a>','<a href="link1"><img src="image1.gif"/ ></a>');
也许有人可以提出一种方法呢？谢谢。
更新：通过旋转我的意思是，一个消失，另一个出现。不是角度旋转。
当我想出自己的解决方案时，我会回答我自己的问题。对不起，如果我解释不好，我希望它也可以对某人有用。我必须避免jQuery的一个特殊原因，有时它必须是这样的。下面是代码，随意发表评论，并提高......一个工作版本在这里http://jsbin.com/oxujuf/3
function rotator(options) {
var a = options.delay;
var b = options.media;
var mediaArr = [];
for(var i = 0, j = b.length; i < j; i++) {
mediaArr.push(b[i].img);
}
document.write('<div id="rotatorContainer"></div>');
var container = document.getElementById('rotatorContainer');
var Start = 0;
rotatorCore();
function rotatorCore() {
Start = Start + 1;
if(Start >= mediaArr.length)
Start = 0;
container.innerHTML = mediaArr[Start];
setTimeout(rotatorCore, a);
}
}
再后来，你可以这样调用它，与一个简单的API。
rotator({
delay : 3500,
media : [{
img : '<img src="http://lorempixel.com/output/abstract-h-c-149-300-7.jpg" width="149" height="300" border="0" />'
}, {
img : '<img src="http://lorempixel.com/output/abstract-h-c-149-300-2.jpg" width="149" height="300" />'
}]
});
你的具体问题，我没有看到过，但你的基本前提已经被问了很多次。你找不到呼叫的原因是
rotate('<img src="1" />', '<img src="2" />');
是因为根据编程实践它是一个坏主意。您正在将内容与脚本混合。客户端网页设计依靠沙盒特定功能来加速开发并使调试更容易。内容，样式和脚本是主要领域。在这里你将内容（图像）与脚本混合在一起。您应该真正使用许多现有的图像旋转脚本之一，这些脚本依赖于现有标记并旋转它们。
<img src="a" />
<img src="b" />
<script>rotateImages();</script>
如果你想要做你的方式，那么你将需要解析你的字符串，然后创建基于这些元素节点。老实说，我认为它不值得花时间以这种格式编码，除非这是出于好奇。
这种超出责任范围的步骤可能不是最好的解决方案，但仍然是。一个完整的Javascript功能（通过标签而不是图像处理）
<html>
<head>
<script>
/*rotate
desc: Rotate a set of first level child objects based on tag name
params:
id = Rotate elements container id
tag = Tag (nodeName - see textNode issue) of DOM objects to be cycled
*/
function rotate(id, tag)
{
/*Normalise string for later comparison*/
tag = tag.toLowerCase();
/*Get container DOM Object*/
var el = document.getElementById(id),
visibleIdentified = false;
hasBeenSet = false,
firstMatchingChild = false;;
/*Iterate over children*/
for(i = 0; i < el.childNodes.length; i++){
/*Set child to var for ease of access*/
var child = el.childNodes[i];
/*If element has the correct nodeName and is a top level chlid*/
if(child.parentNode == el && child.nodeName.toLowerCase() == tag){
/*Set first matching child in case the rotation is already on the last image*/
if(!firstMatchingChild)
firstMatchingChild = child;
/*If child is visible */
if(child.style.display == "block"){
/*Take note that the visible element has been identified*/
visibleIdentified = true;
/*Toggle its visibility (display attribute)*/
child.style.display = "none";
/*Once the visibile item has been identified*/
}else if(visibleIdentified){
/*If the next item to become visible has been set*/
if(hasBeenSet){
/*Toggle visibility (display attribute)*/
child.style.display = "none"
}
/*Catch the next item to become visible*/
else{
/*Toggle visibility (display attribute)*/
child.style.display = "block";
/*Take note that the next item has been made visible*/
hasBeenSet = true;
}
}
}
}
/*If the hasBeenSet is false then the first item is to be made visible
- Only do so if the firstMatchingChild was identified, more or less redundant
exception handling*/
if(!hasBeenSet && firstMatchingChild)
firstMatchingChild.style.display = "block";
}
/*Declare cycle*/
setInterval("rotate('test','div')",1000);
</script>
</head>
<body>
<!-- Example container -->
<div id="test">
<div style="display:block">fire</div>
<div style="display:none">water</div>
<div style="display:none">shoe</div>
<div style="display:none">bucket</div>
</div>
</body>
</html>
需要什么样的灵活性？那我的意思是0,90,180,270度就够了吗？这个动作是动态的还是程序性的？ – CBusBus 2012-01-17 16:52:14
我的意思是一个出现，另一个消失。没有角度旋转。 – devjs11 2012-01-17 16:56:31
我只是好奇，为什么没有jQuery？ – njbair 2012-01-17 17:03:02