试图在没有jQuery的情况下使用纯javascript进行非常简单的图像旋转。
我可以这样称呼的东西，它可以将图像放在同一个地方逐个旋转。
rotator('<a href="link1"><img src="image1.gif"/ ></a>','<a href="link1"><img src="image1.gif"/ ></a>');
也许有人可以提出一种方法吗？谢谢。
更新：通过旋转我的意思是，一个消失，另一个出现。不是角度旋转。
答案 0 :(得分：0)
您之前没有见过的具体问题，但您的基本前提已被多次询问过。你无法找到像
这样的电话的原因rotate('<img src="1" />', '<img src="2" />');
是因为根据编程习惯这是一个坏主意。您正在将内容与脚本混合。客户端Web设计依赖于沙盒某些功能来加速开发并使调试更容易。内容，样式和脚本是主要领域。在这里，您将内容（图像）与脚本混合在一起。您应该使用许多现有的图像旋转脚本中的一个，这些脚本依赖于获取现有标记并旋转它们。
<img src="a" />
<img src="b" />
<script>rotateImages();</script>
如果您想按照自己的方式进行操作，则需要解析字符串，然后根据它们创建元素节点。老实说，我不认为值得花时间用这种格式编码，除非这是为了好奇。
答案 1 :(得分：0)
除了职责之外，这种步骤可能不是最佳解决方案，但仍然如此。一个完整的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>
答案 2 :(得分：-1)
当我想出自己的解决方案时，我会回答我自己的问题。对不起，如果我没有解释清楚，我希望它对某人也有用。我不得不因为一个特殊的原因而避免使用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" />'
}]
});
答案 3 :(得分：-2)