Web サイトのトップページにアニメーションがないのはなぜですか? 以前に Flash As3 を使用して写真を切り替えたことがありますが、効果は非常に優れていますが、変更するのが面倒で難しいです。以前から絵の切り替えエフェクトを自分で作ってみたいと思っていたのですが、面倒だなと思っていたのですが、今日試してみたら割と簡単に作れました。ただし、IE8 の非互換モードでは、透明効果のある div のスタイルの追加が失敗するという小さな問題があります。ただし、Google を使用したところ、IE8 の互換性テストは問題ありませんでした。
とにかく、自分用に記録したので、これ以上は言いません。js はページから分離されておらず、プラグインも作成されていません。ウェブサイトにはこれらの効果のいくつかを含めることはできないため、最初にそれらを実装しましょう。最終的な効果は依然として非常に印象的です。
<スクリプトタイプ="text/javascript">
var picCurrent = 1;
var picTotal = 8;
var 間隔 // 自動的に実行
関数 picChange(current) {
// 現在のアニメーションを停止します
If ($("#divImg").is(":animated")) { $("#divImg").stop() }
picCurrent = 現在;
//現在選択されているスタイルを設定します
$("#divLink").find("a").removeClass("picselect")
$("#divLink").find("a[title='" picCurrent "']").addClass("picselect");
//以下に画像の説明を設定します
var respect = "
";
スイッチ (picCurrent) {
ケース 1: 備考 = 「菊 [ラテン語の学名: Dendranthema Morfolium (Ramat.) Tzvel.]、一般的に使用される菊。菊は菊、菊は多年生草本です ...」;
デフォルト: 備考 = piccurrent "テストの説明";
}
コメント = "";
$("#picremark").html(remark);
//アニメーションを実行
$("#divImg").animate({ left: -((picCurrent - 1) * 1000) "px" }, "1000");
return false;
}
// まだ使用する必要はありません
function PicPer() {
If (picCurrent > 1) {
picCurrent--;
}
else {
picCurrent = picTotal;
}
picChange(picCurrent);
}
//次の
function PicNext() {
if (picCurrent == picTotal) {
picCurrent = 1
}
else {
pic現在 ;
}
picChange(picCurrent);
}
//写真を自動的に切り替えます
function PicRun(関数名) {
picChange(1);
間隔 = setInterval(PicNext, "3000");
}
$(document).ready(function () {
PicRun();
});
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">
<頭>
写真切换
8 7
onclick=" return picChange(6)">6
5 4
3
title="2" onclick=" return picChange(2)">2
onclick=" return picChange(1)" class="">1
