jQueryを使わずに純粋なjavascriptを使って非常に簡単な画像ローテーションを考えようとしています。純粋なjavascript、no jQueryを使った簡単な画像ローテーション
私はそのように呼び出すことができ、それを1つ1つ回転して同じ場所に置くことができます。
rotator('<a href="link1"><img src="image1.gif"/ ></a>','<a href="link1"><img src="image1.gif"/ ></a>');
多分誰かがそれを行う方法を提案できますか？ありがとうございました。
更新：Rotationによって、私は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" />'
}]
});
私が前に見たことがないが、あなたの基本的な前提は、何度も頼まれましたあなたの特定の質問：ここ はカップルのリンクです。
rotate('<img src="1" />', '<img src="2" />');
のような通話が見つからない理由は、プログラミングの慣行によっては悪い考えです。あなたはスクリプトとコンテンツをミックスしています。クライアント側のWebデザインでは、特定の機能をサンドボックス化して開発をスピードアップし、デバッグを容易にしています。コンテンツ、スタイリング、スクリプティングが主な分野です。ここでは、コンテンツ（画像）とスクリプトを混在させます。既存のマークアップを使用して回転させることに依存する多くの既存のイメージローテーションスクリプトのうちの1つを実際に使用する必要があります。
<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
私は1つが現れ、もう1つは消えることを意味しました。角度回転はありません。 – devjs11
私はちょうど興味があります、なぜjQueryはありませんか？ – njbair