复制代码 代码如下:
$(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; //指针位置
count = 7; //图片数量
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] = 测试一下1;
title[2] = 测试一下2;
title[3] = 测试一下3;
title[4] = 测试一下4;
title[5] = 测试一下5;
title[6] = 测试一下6;
title[7] = 测试一下7;
description[1] = 描述一下1;
description[2] = 描述一下2;
description[3] = 描述一下3;
description[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]);
$(#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();
});
然后是css部分：
复制代码 代码如下:
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