jQueryのスライドショーを自作しよう!(最終回/全3回)

テクニカルWebデザイン(TechWeb)

jQueryスライドショーの3回目は、横からのスライドインはそのままに枠外を非表示にしてみます。前回からの追加は5ヵ所です。サクッと終わります。

▼過去の記事は↓コチラ
1回目フェードイン
2回目スライドイン

PR

まずは完成形の動作サンプルから

実際は、もう少しゆっくり切り替えますが、サンプルなので1秒で切り替えています。

jQuery

HTML5

CSS3

※ブログのCSSが影響してるのか枠からはみ出てます(笑)HTMLで作成した分は枠に収まってましたので大丈夫かと思います。

 

2回目からの追加点

CSSには3カ所追加です。

2行目から4行目  画像の下の余白を排除します。
8行目から9行目  ラップ要素の高さを指定し、枠を表示します。
14行目  p要素の上下のマージンをゼロにします。

 

スクリプトへの追加は、18行目22行目の2か所です。

2回目からの追加はこの5ヵ所です。

以前の記事はこちら

その他のTechWebTipsはこちら

熊本でWebに興味あるなら
熊本電子ビジネス専門学校 ITビジネス科

 

PR

関連記事