ulとliを指定し横に並べて

解決済

質問者：basi999
質問日時：2013/01/27 09:16
回答数：3件

テキスト2行、5個のリストをHTMLとCSSとjavascriptでulとliを指定し横に並べて、
2秒間1個のテキストのリストで止まって2秒たったら次のテキストのリストに動く
スクリプトの作り方が知りたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： babu_baboo
回答日時：2013/01/27 20:57

<!DOCTYPE html>

- 0
- 件

通報する

No.2ベストアンサー

回答者： babu_baboo
回答日時：2013/01/27 21:30

#1です。

「動く」とは？こんなん？
<!DOCTYPE html>
<meta charset="UTF-8">
<title>動く？</title>

<style>

ol#hoge {
　width : 800px;
　height : 82px;
　overflow : hidden;
}

#hoge li {
　width : 198px;
　border : 1px red solid;
　height : 80px;
　display : inline-block;
　overflow : hidden;
}

</style>

<body>

<ol id="hoge">
　<li>
　　abc<br>
　　def
　<li>
　　ghi<br>
　　jkl
　<li>
　　mno<br>
　　pqr
　<li>
　　stu<br>
　　vwx
　<li>
　　yzA<br>
　　BCD
</ol>

<script>

(function () {
　var parent = document.getElementById ('hoge');
　var interval = [2000, 20];
　var mode = 0;
　var width = 200;
　var step = 4;
　
　var c = parent.childNodes;
　var i = c.length;
　var e;
　
　for (; e = c[--i]; )
　　if (1 !== e.nodeType)
　　　parent.removeChild (e);
　
　var x;
　
　function LOOP () {
　　var e = parent.firstChild;
　　var t = null;
　　
　　switch (mode) {
　　case 0 :
　　　x = 0;
　　　setTimeout (LOOP, interval[mode]);
　　　mode = 1;
　　　break;

　　case 1 :
　　　x -= step;
　　　if (x < -width) {
　　　　x = 0;
　　　　mode = 0;
　　　　parent.appendChild (e);
　　　}
　　　e.style.marginLeft = x + 'px';
　　　setTimeout (LOOP, interval[mode]);
　　}
　}

　LOOP ();
}) ();

</script>

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2013/01/27 21:43

＃１です。

れんとう！

べじぇきょくせんを、うごきにとりいれてみる
<!DOCTYPE html>
<meta charset="UTF-8">
<title>ベジェ曲線を利用して動く</title>

<style>

ol#hoge {
　width : 800px;
　height : 82px;
　overflow : hidden;
}

#hoge li {
　width : 198px;
　border : 1px red solid;
　height : 80px;
　display : inline-block;
　overflow : hidden;
}

</style>

<body>

<ol id="hoge">
　<li>
　　abc<br>
　　def
　<li>
　　ghi<br>
　　jkl
　<li>
　　mno<br>
　　pqr
　<li>
　　stu<br>
　　vwx
　<li>
　　yzA<br>
　　BCD
</ol>

<script>
function BG(a,b,c,d){var e=3*a,f=3*(c-a)-e,g=3*b,h=1-e-f,i=3*(d-b)-g,j=1-g-i;return function(a){for(var b=a,c=5,d;c--;)if(.001<Math.abs(d=b*(e+b*(f+b*h))-a))b-=d/(e+b*(2*f+3*h*b));return((b*j+i)*b+g)*b}};

(function () {
　var parent = document.getElementById ('hoge');
　var interval = [2000, 20];
　var mode = 0;
　var width = 200;
　var step = .01;
　var bz = BG.apply (null, [0, 0, 0.28, 1]);
　
　var c = parent.childNodes;
　var i = c.length;
　var e;
　
　
　for (; e = c[--i]; )
　　if (1 !== e.nodeType)
　　　parent.removeChild (e);
　
　var x;
　
　function LOOP () {
　　var e = parent.firstChild;
　　var ml;
　　
　　switch (mode) {
　　case 0 :
　　　x = 0;
　　　setTimeout (LOOP, interval[mode]);
　　　mode = 1;
　　　break;

　　case 1 :
　　　x += step;
　　　if (1 < x) {
　　　　x = 1;
　　　　mode = 0;
　　　　parent.appendChild (e);
　　　　ml = 0;
　　　}
　　　else {
　　　　ml = (-bz (x) * width |0);
　　　}
　　　e.style.marginLeft = ml + 'px';
　　　setTimeout (LOOP, interval[mode]);
　　}
　}

　LOOP ();
}) ();

</script>