Imitation Thunder Focus Advertising Effect (JQuery Version)_jquery

The first is the JS code part. The JQuery package must be introduced before:

Copy the code The code is as follows:

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

local = 1; //Pointer position
count = 7; //Number of 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] = "Images/ ceshi.jpg";
title[1] = "Test 1";
title[2] = "Test 2";
title[3] = "Test 3";
title[4] = "Test 4";
title[5] = "Test 5";
title[6] = "Test 6";
title[7] = "Test 5" 7";
description[1] = "Describe 1";
description[2] = "Describe 2";
description[3] = "Describe 3";
description[ 4] = "Describe 4";
description[5] = "Describe 5";
description[6] = "Describe 6";
description[7] = "Describe 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]);
$("#Images a").attr("href",imgLink[local]);
}else{
$(this).removeClass("active");
$(this ).attr("class","Menu_Off");
}
});
local ;
if(local > count){
local = 1;
}
theTimer = 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);
showImage();
});
$("#Buttons div").mouseover(function() {
if($(this).attr("id") != "Top"){
$(this).css("cursor","pointer");
}
if($(this).attr("class") == "Menu_Off"){
$(this).attr("class","Menu_On");
}
});
$("#Buttons div").mouseout(function(){
if($(this).attr("class") == "Menu_On"){
$(this).attr( "class","Menu_Off");
}
});

showImage();
});

Then CSS Part:

Copy code The code is as follows:

body{
margin: 0px;
padding:0px;
background-color:#FFFFFF;
}
table,th,tr,td,div,span,p{
font-size:9pt;
}
a:link{
color:#FFFFFF;
text-decoration:none;
}
a:visited{
color:#FFFFFF;
text -decoration:none;
}
a:active{
color:#FFFFFF;
text-decoration:none;
}
a:hover{
color:# FF0000;
text-decoration:none;
}
#Images{
position:relative;
width:304px;
height:270px;
border:1px #b6cae3 solid;
background-color:#FFFFFF;
}
#Titles{
width:100%;
height:73px;
right:0px;
bottom:0px ;
background-color:#000000;
filter:alpha(opacity=40);
}
.Menu_On{
float:right;
width:15px;
height:18px;
background-color:#000000;
margin-left:2px;
line-height:20px;
color:#FF0000;
}
.Menu_Off{
float:right;
width:15px;
height:18px;
background-color:#000000;
margin-left:2px;
line-height:20px;
color:#FFFFFF;
}
#Top{
float:right;
width:47px;
height:18px;
background-color:#000000;
filter:alpha(opacity=40,finishopacity=100,style=1,startx=0px,starty=18px,finishx=47px,finishy=18px);
}
#AdTitle{
padding-top :10px;
padding-bottom:6px;
font-weight:bold;
color:#FFFFFF;
font-size:18px;
padding-left:10px;
}
#AdDescription{
color:#FFFFFF;
padding-left:10px;
}

最后是HTML部分： 

复制代码 代码如下:

测试一下1

描述一下1

7

6

5

4

3

2

1