ホームページ >ウェブフロントエンド >jsチュートリアル >jquery1.4.2_jquery に基づく Flash のような見事なフォーカス画像再生効果
jquery1.4.2_jquery に基づく Flash のような見事なフォーカス画像再生効果
- WBOYオリジナル
- 2016-05-16 18:28:571253ブラウズ
わかりました！これ以上ナンセンスなことはありません！コードを掲載しました！より良い方法を持っていて、アドバイスをくれる専門家はいますか?
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 コード
コードをコピーします
コードは次のとおりです:
🎜>
/*
* 画像プレーヤー
* 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 までご連絡ください。