ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery はグリッド バインディング template_jquery を実装します

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-05-16 16:17:291237ブラウズ

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

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

ページの JS コード

コードをコピー コードは次のとおりです:


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();
});



 
复制代码代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

    写真切换
   
   
   

   

       

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

       
       

            测试介绍文件了啊

   

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。