모방 썬더 포커스 광고 효과(JQuery 버전)_jquery

첫 번째는 JS 코드 부분입니다.

코드 복사 코드는 다음과 같습니다. 🎜>

$(document).ready(function(){
var imgUrl = new Array();
var title = new Array();
var 설명 = new Array( );
var imgLink = new Array();
var count;

local = 1; //포인터 위치 Images
imgUrl[1] = "Images/ceshi.jpg";
imgUrl[2] = "Images/ceshi1.jpg";
imgUrl[3] = "Images/ceshi.jpg"; 🎜>imgUrl[4] = " Images/ceshi1.jpg";
imgUrl[5] = "Images/ceshi.jpg";
imgUrl[6] = "Images/ceshi1.jpg"; imgUrl[7] = "이미지/ ceshi.jpg";
title[1] = "테스트 1";
title[2] = "테스트 2"
title[3] = "테스트 3 ";
title[4] = "테스트 4";
title[5] = "테스트 5";
title[6] = "테스트 6";
title[7] = " 테스트 5" 7";
설명[1] = "설명 1";
설명[2] = "설명 2";
설명[3] = "설명 3"; 4] = "설명 4";
description[5] = "설명 5";
description[6] = "설명 6";
description[7] = "설명 7" ; imgLink[1] = "ceshi1.asp";
imgLink[2] = "ceshi2.asp";
imgLink[3] = "ceshi3.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 [local]);
$("#AdTitle a").html(title[local])
$("#AdDescription a").html(description[local]); "#이미지 a").attr("href",imgLink[local])
}else{
$(this).removeClass("active")
$(this ).attr( "class","Menu_Off");
}
})
local ;
if(local > count){
local = 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"). replacement("B","")]);
$("#Images a").attr("href",imgLink[$(this).attr("id").replace( "B", "")]);
}else{
$(this).removeClass("active")
$(this).attr("class","Menu_Off");
});
window.clearInterval(theTimer);
showImage()
})
$("#Buttons div").mouseover() {
if($(this).attr("id") != "상단"){
$(this).css("cursor","pointer")
}
if($( this).attr("class") == "Menu_Off"){
$(this).attr("class","Menu_On")
}
}); "#버튼 div").mouseout(function(){
if($(this).attr("class") == "Menu_On"){
$(this).attr( "class", "Menu_Off");
}
});

showImage()
})



CSS 부분:





코드 복사


코드는 다음과 같습니다.

body{ margin: 0px;
패딩:0px;

배경색:#FFFFFF; } 테이블,th,tr,td,div,span,p{ 글꼴 크기:9pt; } a:링크{ 색상:#FFFFFF; 텍스트 장식:없음

}

a:visited{
색상:#FFFFFF
텍스트 -장식 :없음
}
a:활성{
색상:#FFFFFF;
텍스트 장식:없음
}
a:hover{
색상:# FF0000;
텍스트 장식:없음
}
#이미지{
위치:상대적;
너비:304px
테두리:1px #b6cae3 solid;
배경색:#FFFFFF;
#제목{
폭:100%;
오른쪽:0px
하단:0px; 🎜>배경색:#000000;
필터:알파(불투명도=40);
.Menu_On{
float:right; 18px; 배경색:#000000;
여백-왼쪽:2px;
색상:#FF0000;
.Menu_Off >float:오른쪽;
높이:18px;
배경색:#000000;
라인 높이:20px; 색상:#FFFFFF
}
#Top{
float:right
너비:47px
배경색:#000000; :alpha(opacity=40,finishopacity=100,style=1,startx=0px,starty=18px,finishx=47px,finishy=18px);
}
#AdTitle{
padding-top :10px ;
패딩-하단:6px;
색상:#FFFFFF;
패딩-왼쪽:10px; 🎜>#광고설명{
color:#FFFFFF;
padding-left:10px


最后是HTML부분분: 

复主代码 代码如下:

测试一下1

描述一下1

7

6

5

4

3

2

1