使用纯javascript进行简单的图像旋转，无需jQuery
尝试在没有jQuery的情况下使用纯javascript实现非常简单的图像旋转 我可以这样称呼它，它可以把图像放在同一个点上，一个接一个地旋转使用纯javascript进行简单的图像旋转，无需jQuery,javascript,Javascript,尝试在没有jQuery的情况下使用纯javascript实现非常简单的图像旋转 我可以这样称呼它，它可以把图像放在同一个点上，一个接一个地旋转 rotator('<a href="link1"><img src="image1.gif"/ ></a>','<a href="link1"><img src="image1.gif"/ ></a>'); 旋转器（“”，”）； 也许有人能建议一种方法？多谢各位 更新：我说的旋转
rotator('<a href="link1"><img src="image1.gif"/ ></a>','<a href="link1"><img src="image1.gif"/ ></a>');
更新：我说的旋转是指一个消失，另一个出现。不是角度旋转。这在许多老论坛和博客上都有介绍。 以下是几个链接：
你的具体问题我以前没见过，但你的基本前提已经被问过很多次了。你找不到像这样的电话的原因
rotate('<img src="1" />', '<img src="2" />');
旋转（“”，”）；
<img src="a" />
<img src="b" />
<script>rotateImages();</script>
旋转图像（）；
如果您想按自己的方式执行，则需要解析字符串，然后基于它们创建元素节点。老实说，除非出于好奇，否则我认为花时间用这种格式编写一个代码是不值得的 这类步骤超出了职责范围，可能不是最好的解决方案，但无论如何。一个完整的Javascript函数（按标记而不是按图像处理）
/*轮换
desc：基于标记名旋转一组第一级子对象
参数：
id=旋转元素容器id
tag=要循环的DOM对象的标记（nodeName-请参阅textNode问题）
*/
函数旋转（id、标记）
{
/*将字符串标准化，以便以后比较*/
tag=tag.toLowerCase（）；
/*获取容器DOM对象*/
var el=document.getElementById（id），
visibleIdentified=false；
hasBeenSet=false，
firstMatchingChild=false；；
/*反复浏览儿童*/
对于（i=0；i功能旋转器（选项）{
var a=期权。延迟；
var b=options.media；
var mediaArr=[]；
对于（var i=0，j=b.length；i<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>
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);
}
}
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" />'
}]
});