Jquery はグリッド バインディング template_jquery を実装します

Web サイトのトップページにアニメーションがないのはなぜですか? 以前に Flash As3 を使用して写真を切り替えたことがありますが、効果は非常に優れていますが、変更するのが面倒で難しいです。以前から絵の切り替えエフェクトを自分で作ってみたいと思っていたのですが、面倒だなと思っていたのですが、今日試してみたら割と簡単に作れました。ただし、IE8 の非互換モードでは、透明効果のある div のスタイルの追加が失敗するという小さな問題があります。ただし、Google を使用したところ、IE8 の互換性テストは問題ありませんでした。

とにかく、自分用に記録したので、これ以上は言いません。js はページから分離されておらず、プラグインも作成されていません。ウェブサイトにはこれらの効果のいくつかを含めることはできないため、最初にそれらを実装しましょう。最終的な効果は依然として非常に印象的です。

ページの 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
       

       

            测试介绍文件了啊

   

css の实现

复制代码代码如下:

.picMain
{
    マージン: 自動;
    オーバーフロー: 非表示;
    幅: 1000px;
    高さ: 400px;
    位置: 相対;
}
.picimg
{
    幅: 10000px;
    高さ: 400px;
    背景色: #000000;
    位置: 絶対;
    上: 0px;
}
.pic備考
{
    位置: 絶対;
    幅: 500px;
    高さ: 50px;
    下: 0px;
    左: 0px;
    色: #FFFFFF;
    テキストインデント: 2em;
}
.picコメント
{
    色: #FFFFFF;
    テキスト装飾: なし;
}
.picコメント a:hover
{
    テキスト装飾: 下線;
}
.picaction
{
    位置: 絶対;
    幅: 1000px;
    高さ: 50px;
    背景色: #000000;
    フィルター: アルファ(不透明度=50);
    -moz-不透明度: 0.5;
    不透明度: 0.5;
    オーバーフロー: 自動;
    下: 0px;
    左: 0px;
    text-align: right;
}
.picaction a
{
    境界線: 1px 実線 #C0C0C0;
    幅: 30px;
    高さ: 30px;
    float: 右;
    行の高さ: 30px;
    テキスト装飾: なし;
    text-align: 中央;
    色: #FFFFFF;
    フォントの太さ: 太字;
    margin-top: 10px;
    表示: ブロック;
    margin-right: 10px;
}
.pic
{
    幅: 1000px;
    高さ: 400px;
    float: 左;
}
.picselect
{
    背景色: #919191;
}