コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jquery plug-in_javascript スキルに基づいて一般的なスライド効果を実装する

WBOY
リリース： 2016-05-16 17:18:02
オリジナル
1228 人が閲覧しました

Web サイトでスライドショー効果を使用するのは非常に一般的で、実装方法を調べたところ、複雑だと思いましたが、予想外に非常に簡単であることがわかりました。既製の jquery プラグイン jquery.KinSlideshow.js があります。

jquery.KinSlideshow.js を使用すると、スライドショー効果を簡単に実現できます

HTML コード:

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

js コード:

コードをコピー コードは次のとおりです:
$(function () {
$("#focusNews").KinSlideshow({
// moveStyle: "down", // 切り替え方向を下に設定します [デフォルトは左スイッチ]
intervalTime:8, // インターバル時間を 8 秒に設定します [デフォルトは 5 秒]
mouseEvent: " Mouseover", //マウス イベントを「マウス スライドの切り替え」に設定します [マウス クリック時のデフォルトの切り替え]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //タイトルのテキスト サイズを 14px に設定します, color: #FF0000
});

})

画像サイズを設定する CSS

コードをコピー コードは次のとおりです:
.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px;高さ:400px; }

最終レンダリング

関連ラベル：
jQueryプラグイン スライドショー
ソース：php.cn
前の記事：jsでマウスイベントを動的に設定するサンプルコード_javascriptスキル 次の記事：JavaScript_javascript のヒントで部分文字列を使用して文字列の最後の文字を削除する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Shopware 6 プラグイン: ブール構成を削除して複数選択構成に移行する方法 現在、プラグインを通じて送信されたレビューを自動的に公開するブール型 reviewSkipModeration 値で構成されている Shopware6 プラグインがあります: co...
から 2024-04-03 23:09:28
0
1
410
created_in列がトリガー内にあるかどうかを確認するにはどうすればよいですか? ユーザー テーブルの列とトリガー構造 CREATETABLE`users`(`created_in`datetimeNOTNULL)ENGINE=InnoDBDEFAULTCHAR...
から 2024-04-03 17:50:59
0
1
305
WooCommerce Checkout - ユーザーの役割とカートの内容を検証する WooCommerce のチェックアウト プロセスで問題が発生しています。通常商品とB2B商品を区別するために「B2BforWooCommerce」プラグインを使用しています。シナ...
から 2024-04-03 11:58:52
0
1
475
Jquery スライダーが正しく表示されないのはなぜですか? WordPress カスタムテーマに SlickSlider ライブラリを実装して、高度なカスタムフィールドプラグインから取得した画像スライダーを表示しようとしています。ただし、ス...
から 2024-04-03 10:43:26
0
1
397
AJAX POST リクエストのフィールドを更新する jQuery または Javascript を使用して、AJAXPOST リクエストのカスタム フィールドを動的に更新しようとしています。 AJAXPOST リクエストは、Word...
から 2024-04-02 11:45:41
0
1
360
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート