検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Imitation Thunder フォーカス広告効果 (JQuery 版)_jquery

Imitation Thunder フォーカス広告効果 (JQuery 版)_jquery

WBOY
WBOYオリジナル
2016-05-16 18:58:261011ブラウズ

1 つ目は JS コード部分です:

コードをコピーします コードは次のとおりです。 🎜>
$(document).ready(function(){
var imgUrl = new Array();
var title = new Array();
var description = new Array( );
var imgLink = new Array();
var local; //ポインタ位置
count = 7;画像
imgUrl[1] = "画像/ceshi.jpg";
imgUrl[2] = "画像/ceshi1.jpg";
imgUrl[3] = "画像/ceshi.jpg"; 🎜>imgUrl[4] = "画像/ceshi1.jpg";
imgUrl[5] = "画像/ceshi.jpg";
imgUrl[6] = "画像/ceshi1.jpg"; imgUrl[7] = "画像/ ceshi.jpg";
title[1] = "テスト 1";
title[2] = "テスト 3"; ";
title[4] = "テスト 4";
title[5] = "テスト 5";
title[6] = "テスト 6";
title[7] = "テスト 5" 7";
説明 [1] = "説明 2";
説明 [3] = "説明 3"; 4] = "説明 4";
説明 [5] = "説明 6";
説明 [7] = "説明 7"; imgLink[1] = "ceshi1.asp";
imgLink[2] = "ceshi2.asp";
imgLink[4] = "ceshi4. asp";
imgLink[5] = "ceshi5.asp";
imgLink[6] = "ceshi6.asp";
imgLink[7] = "ceshi7.asp";

function showImage(){
$("#Buttons div").each(function(){
if($(this).attr("id") == "B" local ){
$(this).attr("class","Menu_On");
$(this).addClass("active");
$("#AdImage").attr(" src",imgUrl) [ローカル]);
$("#AdTitle a").html(タイトル[ローカル]);
$("#AdDescription a").html(説明[ローカル]); "#Images a").attr("href",imgLink[local]);
}else{
$(this).removeClass("active"); "クラス","メニューオフ");
}
if(ローカル > カウント){
ローカル = 1; = setTimeout(function(){showImage()},3000);
}

$("#Buttons div").click(function(){
local = $ (this). attr("id").replace("B","");
var cid = $(this).attr("id");
$("#Buttons div") .each(function) (){
if($(this).attr("id") == cid){
$(this).addClass("active");
$("# AdImage"). attr("src",imgUrl[$(this).attr("id").replace("B","")]);
$("#AdTitle a").html( title[$( this).attr("id").replace("B","")]);
$("#AdDescription a").html(description[$(this).attr(" id"). replace("B","")]);
$("#Images a").attr("href",imgLink[$(this).attr("id").replace( "B", "")]);
}else{
$(this).removeClass("active");
$(this).attr("class","Menu_Off");
});
window.clearInterval(theTimer);
$("#Buttons div").mouseover(); if($(this).attr("id") != "トップ"){
$(this).css("カーソル","ポインタ")
}
if($( this).attr("クラス") == "メニュー_オフ"){
$(この).attr("クラス","メニュー_オン")
}
}); "#Buttons div").mouseout(function(){
if($(this).attr("class") == "Menu_On"){
$(this).attr( "class", "Menu_Off");
}
});



次に CSS 部分:




コードをコピー


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


body{
margin: 0px;
パディング:0px;
背景色:#FFFFFF;
テーブル,th,tr,td,span,p{
フォントサイズ:9pt; }
a:link{
color:#FFFFFF;
text-decoration:none;
a:visited{
color:#FFFFFF; :none;
}
a:active{
color:#FFFFFF;
text-decoration:none; a:hover{ color:# FF0000;
text-decoration:none;
} #Images{ position:relative; height:270px; 背景色:#FFFFFF; #タイトル{ 幅:100%;
下:0px; 🎜>背景色:#000000;
フィルター:alpha(opacity=40);
.Menu_On{
幅:15px; 18px;
背景色:#000000;
行の高さ:20px;
色:#FF0000;
>float:right;
幅:18px;
背景色:#000000;
行の高さ:20px; color:#FFFFFF;
#Top{
幅:47px;
背景色:#000000; :alpha(opacity=40,finishopacity=100,style=1,startx=0px,starty=18px,finishx=47px,finishy=18px);
}
#AdTitle{
padding-top :10px ;
padding-bottom:6px;
color:#FFFFFF;
padding-left:10px; 🎜>#AdDescription{
color:#FFFFFF;
padding-left:10px;
最後は HTML 部分：
复制代代码如下: