javascript初心者です。速攻でやらなければならないので皆様の力

締切済

質問者：numbernine_
質問日時：2010/09/12 06:50
回答数：4件

javascript初心者です。速攻でやらなければならないので皆様の力を是非お貸しください

今私はベンチャー企業の新卒の「インターンでWebサイトを制作しているのですが、プログラミングも初心者です。
ｈｔｍｌやｃｓｓは少し勉強した程度で制作を任されてしまいました。

そこで皆様にご教授いただきたく書きこませて頂きました。

質問です。
HPのトップ画でいくつかの画像を切り替えていくというプログラムを組みたいのですが、
如何せんはじめたばかりで、コードがわかりません。。。

参考HP http://kimuratakahiro.com/

このサイトのように下から上へか、左右の動きか、
もしくはフェードアウトして、２枚目に切り替えるというようなプログラムを組みたいです。

宜しければコードを少しだけでも書いていただけると有難いです。
もしくは、参考になる書籍やサイトなどがありましたら、
ご教授頂ければ幸いです。

兎に角、納品まで時間がなく焦っています。
是非宜しくお願い致します。

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： babu_baboo
回答日時：2010/09/13 12:00

こんにちは。

ゆうえきでなければ、ほうちぷれ～になりそうだね・・・。
なので「とうめいどがへんかする」だけかきました。
ぜんかくくうはくは、はんかくにしてちょ。

（たのひとに、れすでもつけてれば、ぜんぶかいたものを・・・。
「いどうする」だけのやつは、だれかにたくす。）

<!DOCTYPE html>
<title></title>

<body>
<p><img src="./img/0.gif" alt="Image" id="i0"></p>

<script>
//@cc_on
var setOpacity = function (alpha) {
　var flag = null;

　if (alpha < 0) {
　　alpha = 0;
　　flag = true;
　}

　else if (100 < alpha) {
　　alpha = 100
　　flag = true;
　}

　this.style./*@if (@_jscript)
　　filter = 'alpha(opacity='+ alpha + ')' @else@*/
　　opacity = alpha / 100 /*@end@*/;
　
　return flag;
};

var opacityChanger = function　(node, opacity, step, interval, endFunc, cbObj, arg) {
　var timerId = null;

　var changer = function ( ) {
　　opacity += step;

　　if (setOpacity.call (node, opacity)) {
　　　clearInterval (timerId);
　　　timerId = null;

　　　if ('function' === typeof endFunc)
　　　　endFunc.apply (cbObj || null, arg || [ ]); // ?
　　}
　};

　if (! setOpacity.call (node, opacity))
　　timerId = setInterval (changer, interval);
};

//___________

var node = document.getElementById ('i0');
var func = function () {
　alert ('きえたよ');
　opacityChanger (node, 0, 2, 50);
};

opacityChanger (node, 100, -2, 50, func);

</script>

- 0
- 件

通報する

No.3

回答者： imaimasan
回答日時：2010/09/12 08:37

あるものを使うのはだめなのですか？

１から書くのはあまりに無理があると思うのですが。
クロスブラウザのこととか考えると、実務レベルのものを今の段階で書くのはまず無理ですよ。
それよりも、ライブラリとプラグインを使えば貼り付けてちょっといじるだけですぐに実装できます。

プロでもライブラリやプラグインぐらい余裕で使います。労力が全然違いますから。
それとも１から書かねばならんのでしょうか？

↓これで実装できまよん。
http://www.skuare.net/2009/03/jqueryjqueryimages …

- 0
- 件

通報する

No.2

回答者： tyatsumi
回答日時：2010/09/12 08:12

私はJavaScriptはしろうとです。

もし画像切り替えのようなプログラムを作れと言われたら、
とりあえず動いたりフェイドアウトしたりするのは置いておいて、
単純なものから作ろうと考えます。

一番簡単なのは、ページにボタンを用意して、
ボタンが押されるたびに表示されている画像が切り替わる、
というのが考えられます。

次にボタンは使わず、タイマーを使って、
一定時間ごとに画像が切り替わる、というのを作ります。

ここまで作っておけば、動いたりフェイドアウトしたりするのを
作るのが間に合わなかったときに、とりあえずこれで我慢してもらう
という保険になります。

もしすでにそこまでできているのなら、余計なお世話でした、ごめんなさい。

- 0
- 件

通報する

No.1

回答者： neochi
回答日時：2010/09/12 07:39

初心者でもなんでも自分で調べてどうにかするのが仕事だよっと言っておいて

それだけだと、なんのために書き込んだ？て言われそうだから

参考サイトだけは示しておきましょう（主にフェードアウト切り替え関係）
これメインにどうぞ
http://chaichan.web.infoseek.co.jp/qa3500/qa3526 …
その他参考サイト
http://www.openspc2.org/reibun/javascript/
http://d.hatena.ne.jp/unageanu/20071013
http://ascii.jp/elem/000/000/180/180999/

サンプルがいっぱいのってるので参考にしましょう。
これでもわからないところがあれば、
javascript フェードアウト　とか　画像の移動　とか
キーワードを変えて必用な情報を探しましょう。

わたしがコード書くときも基本的にはネットからサンプル探して
内容を吟味、少しずつ書き換えて目的の形へ修正
こんな感じのtry&errorですよ。
一からオリジナルで創作するよーな人もいますけど
いまどきはサンプルコードがいっぱいありますからね。
オリジナルを考えるよりもサンプルコードを修正するほうが
効率がいいです。

それと、わかってるとは思うけど
文中に　alert('表示したいstr’ + 変数);　のように
変数の中身を確認できるようなコードを入れておくとデバッグが楽です

がんばれ新卒！