jquery1.4.2_jquery に基づく Flash のような見事なフォーカス画像再生効果

わかりました！これ以上ナンセンスなことはありません！コードを掲載しました！より良い方法を持っていて、アドバイスをくれる専門家はいますか?
CSS コード

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

/*
* 画像プレーヤー
* 著者:mr·zhong
* 日付:2010-04-19
*/
#playerBox{
幅:305px; 高さ:282px; 🎜>ボーダー:1px ソリッド
}
#playerImage ul{
マージン:0px;
ボーダー:0px;
位置:absolute;
#playerImage ul li{
margin:0px;
list-style:none; 🎜>位置 :absolute;
}
#playerImage li img{
幅:305px;
高さ:282px;
#playerNavAndTitle; 🎜>z -index:10;
高さ:50px;
背景色:#000; ;
-moz-opacity: 0.6;
#playerNavAndTitle #playerTitle{
width:auto;
line-height; :30px;
テキストインデント:10px;
}
#playerNavAndTitle #playerTitle a{
テキスト装飾:none; ;
position:absolute;
font-size:15px;
font-family:宋体>}
#playerNavAndTitle #playerTitle a:hover
{
color:Yellow ;
}
#playerNavAndTitle #playerNav{
float:right;
}
#playerNavAndTitle #playerNav {
float:left; 🎜>表示:ブロック;
境界線:1px;
高さ:5px 5px; >text-align:center;
text-decoration:none;
font-family:宋体; 🎜>}
#playerNavAndTitle #playerNav .hover{
background-color:#FFFFFF;
border:1px Solid #cc3300;
float:left; > 表示: ブロック;
幅: 15 ピクセル;
行の高さ: 15 ピクセル;装飾:なし;
カーソル:ポインタ;
フォントファミリー:宋体;


HTML コード



コードをコピーします


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

🎜>

• 
• 
  


• 


• 

a>
テスト 2
テスト 3 "> テスト 4
テスト 5

< ; /div>



JS コード



>

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

/*
* 画像プレーヤー
* author:mr·zhong
* date:2010-04-19
*/
//現在のナビゲーション ページ番号
var currentPage = 1;
//画像間隔
var playerTime = 3000;
jquery(function(){
SetPlayerNavPosition();
OnLoadingImages();
OnLoadingLinks( ) ;
setInterval("Player()",playerTime)
});
/*
* 画像再生メソッド
*/
function Player(){
(jquery("#page_" currentPage));
if(currentPage == jquery("#playerNav a").length)
currentPage = 1;
else
}
/*
* 画像のページ番号を作成し、ページ番号のクリックイベントをバインドします
* count: 作成するページ数
*/
function CreatePageNberObj(count){
var Pages = '';
for(var i = 1; i <= (count - 1); i ){
pages = '' i ''
}
jquery("#playerNav").html(pages); var i = 1; i <= count; i ){
BindPageClick("page_" i)
}
}
/*
* 画像コレクションをロードし、一意の画像の ID、最後に 1 つを表示し、他のものを非表示にします。
*/
function OnLoadingImages(){
var li_id = 1;
jquery("#playerImage li").each(function(){
jquery (this).attr("id","play_img_" li_id);
if(li_id > 1){
SetImageShowOrHide(jquery(this),false); >li_id;
});
}
/*
* 画像に対応するリンクセットをロードし、リンクに一意の ID を設定し、最後に他の */
function OnLoadingLinks(){
var a_id = 1;
jquery("#playerTitle a").each(function(){
jquery(this).attr("id" ,"link_" a_id);
if(a_id > 1){
SetImageShowOrHide(jquery(this),false);
a_id ;
CreatePageNberObj (a_id);
}
/*
* 画像ページ番号のクリック イベントをバインドする基礎となるメソッド
*/
function BindPageClick(id){
jquery(" #" id).click(function(){
PageClick(jquery(this));
});
}
/*
* 画像ページ番号 クリック処理方法
* obj: 現在のページ番号要素 object
*/
function PageClick(obj){
var id = obj.attr("idx")
//ページ番号がクリックされたときページ番号は自動的に再生されます。番号は currentPage Recorder に再割り当てする必要があります
currentPage = id;
//すべてのページ番号スタイルをデフォルトに設定します
jquery("#playerNav a").removeClass("hover) ");
//現在選択されているページ番号を設定します 指定した色の場合
SetPageColor(obj,true);
//画像の表示または非表示
jquery("#playerImage li") .each(function(){
if(jquery(this) .attr("id") == ("play_img_" id)){
SetImageShowOrHide(jquery(this),true);
} else{
SetImageShowOrHide(jquery(this),false);
}
});
//テキストチェーンの表示または非表示
jquery("#playerTitle a").each(function) (){
if(jquery(this).attr(" id") == ("link_" id)){
SetImageShowOrHide(jquery(this),true);
>SetImageShowOrHide(jquery(this),false);
}
});
}
/*
* 指定した要素または画像を表示するかどうかを設定します
* obj: 非表示にする必要がある要素
* isShow: 表示または非表示
*/
function SetImageShowOrHide(obj,isShow){
if(!isShow){
obj.fadeOut( 1000);
}else{
obj.fadeIn(2000);
}
* 指定された画像のページ番号のスタイルを設定します
* obj:設定が必要な要素
* isSelect: 選択するかどうか
*/
function SetPageColor( obj,isSelect){
if(!isSelect){
obj.removeClass("hover" );
}else{
obj.addClass("hover");
}
}
/*
* 画像番号のリンクと画像タイトルの DIV 位置を設定します
*/
function SetPlayerNavPosition(){
var offset = jquery("#playerBox").offset() ;
var boxHeight = jquery("#playerBox").height(); navHeight = jquery("#playerNavAndTitle").height();
jquery("#playerNavAndTitle").css( { top:(offset.top boxHeight - navHeight) 1 "px", left:offset.left 1 " px" });
}



デモ アドレス
ダウンロード アドレス

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

1 か月前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7642

15

CakePHP チュートリアル

1392

52

Steamのアカウント名の形式は何ですか

91

11

Win11 Activation Key Permanent

72

19

NYTの接続はヒントと回答です

33

150

もっと見る