<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
/* create yecol */
/* Time 2009-08-13 */
/* Vserion 1.0 */
#yecoladv_body {
position:absolute;
width:550px;
height:300px;
z-index:1;
border:#999 solid 1px;
}
#yecoladv_head {
position:absolute;
width:550px;
height:240px;
z-index:1;
border-bottom:#999 solid 1px;
}
#yecoladv_foot {
position:absolute;
width:550px;
height:60px;
z-index:2;
left: 0px;
top: 240px;
margin-left:0px;
margin-top:-240px;
/*border:#999 solid 1px;*/
}
#yecoladv_left {
position:absolute;
width:20px;
height:60px;
z-index:1;
/*background-color:#006;*/
left: 0px;
top: 240px;
/*background-image:url(lr/1.jpg);*/
}
#yecoladv_contorl {
position:absolute;
width:510px;
height:60px;
z-index:2;
left: 20px;
top: 240px;
z-index:3;
}
#yecoladv_right {
position:absolute;
width:20px;
height:60px;
z-index:3;
left: 530px;
top: 240px;
/*background-color:#CC6;*/
/*background-image:url(lr/4.jpg);*/
}
.img_contorl_par {
position:absolute;
width:102px;
height:60px;
z-index:1;
/*background-color:#06F;*/
}
.img_contorl_img {
position:absolute;
width:88px;
height:47px;
margin-left: 6px;
margin-top: 5px;
left: 2px;
top: 2px;
}
</style>
</head>
<body>
<div id="yecoladv_body">
<div id="yecoladv_head"><a id="adv_a" target="_blank" href="http://www.ideaskin.com"><img width="550" height="240" class="" id="adv_img" style=" border:0px;"/></a></div>
<div id="yecoladv_foot">
<div id="yecoladv_left" onclick="gotToLeft()" onmouseover="mouseOver('yecoladv_left')" style="background-image:url(lr/1.jpg)" onmouseout="mouseOut('yecoladv_left')"></div>
<div id="yecoladv_contorl">
<div id="apDiv1" class="img_contorl_par">
<div id="apDiv2" class="img_contorl_img"></div>
</div>
</div>
<div id="yecoladv_right" onclick="goToRight()" onmouseover="mouseOver('yecoladv_right')" style="background-image:url(lr/4.jpg)" onmouseout="mouseOut('yecoladv_right')"></div>
</div>
</div>
</body>
<script type="text/javascript" language="javascript1.5">
var imgCount=15;//总图片数量，可以更改
var imgIndex=0;//当前表示，可以更改即默认显示那几张图片0（0-4），5（5-9），10（10-15）。。。
var tempIndex=0;//选中标识，不可更改，要不显示会乱掉的
var goto = false;
var hreflist="http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com|http://www.ideaskin.com";//存放图片链接的地址,以竖线"|"隔开数量要和imgCount一致
var hrefArray = hreflist.split("|");
var imgSrcArray=new Array(imgCount);
var mowimgArrays= new Array(5);
createAdv = function()
{
//var imgSrcArrat=new Array(imgCount);
for(var i=0;i<imgCount;i++)
{
imgSrcArray[i] = i+".jpg";
}
createAdvContorl(imgIndex);
}
createAdvContorl = function(id)
{
var nowindex= parseInt(id/5);
var nowimgArray = new Array(5);
var temp ;
switch (nowindex)
{
case 0:
{
for(var n =0;n<5;n++)
{
nowimgArray[n] = imgSrcArray[n];
temp=0;
}
}
;break;
case 1:
{
for(var n =0;n<5;n++)
{
var j=n+5;
nowimgArray[n] = imgSrcArray[j];
temp=5;
}
};break;
case 2:
{
for(var n =0;n<5;n++)
{
var j = n+10;
nowimgArray[n] = imgSrcArray[j];
temp=10;
}
};break;
}
var conHTML = ""
var l = -102;
for(var j=0;j<5;j++)
{
var ssid = j+temp;
l=l+102;
conHTML+="<div id='apDiv1' class='img_contorl_par' style='left:"+l+"px;'><div id='conImgDiv_"+ssid+"' class='img_contorl_img' style='background-image:url(adv_images_s/"+nowimgArray[j]+");left:0px;' onclick=changenowimg(\'conImgDiv_"+ssid+"\')></div></div>"
mowimgArrays[j] = ssid;
}
var contorlpar = document.getElementById("yecoladv_contorl");
contorlpar.innerHTML=conHTML;
}
mouseOver = function(id)
{
//alert(id);
var divgo = document.getElementById(id);
var src = divgo.style.backgroundImage;
//alert(src);
src = src.replace(".jpg","_o.jpg");
//alert(src);
divgo.style.backgroundImage = src;
}
mouseOut = function(id)
{
var divgo = document.getElementById(id);
var src = divgo.style.backgroundImage;
//alert(src);
src = src.replace("_o.jpg",".jpg");
//alert(src);
divgo.style.backgroundImage = src;
}
changenowimg = function(id)
{
var tempid=id.split("_")[1];
//alert(tempid);
var nowclickDiv= document.getElementById("adv_img");
nowclickDiv.src="adv_images/"+tempid+".jpg";
//nowclickDiv.style.border="#F00 solid 3px"
var nowDiv = document.getElementById(id);
nowDiv.style.border="#F00 solid 3px";
var ahref = document.getElementById("adv_a");
ahref.setAttribute("href",hrefArray[tempid]);
for(var k=0;k<5;k++)
{
if(mowimgArrays[k] !=tempid)
{
var tempDiv = document.getElementById(id.split("_")[0]+"_"+mowimgArrays[k]);
tempDiv.style.border="0px";
}
else
{
tempIndex=k+1;
}
}
if(goto)
{
window.setInterval(function(){
var j ;
if(tempIndex<5)
{
j=mowimgArrays[tempIndex];
}
else
{
tempIndex=0;
j=mowimgArrays[tempIndex];
}
tempIndex+=1;
changenowimgs('conImgDiv_'+j);
},3000);
goto = false;
}
else
{
window.clearInterval(Interval);
goto = true;
}
}
changenowimgs = function(id)
{
var tempid=id.split("_")[1];
//alert(tempid);
var nowclickDiv= document.getElementById("adv_img");
nowclickDiv.src="adv_images/"+tempid+".jpg";
//nowclickDiv.style.border="#F00 solid 3px"
var nowDiv = document.getElementById(id);
nowDiv.style.border="#F00 solid 3px";
var ahref = document.getElementById("adv_a");
ahref.setAttribute("href",hrefArray[tempid]);
for(var k=0;k<5;k++)
{
if(mowimgArrays[k] !=tempid)
{
var tempDiv = document.getElementById(id.split("_")[0]+"_"+mowimgArrays[k]);
tempDiv.style.border="0px";
}
else
{
tempIndex=k+1;
}
}
}
gotToLeft = function()
{
imgIndex -=5;
if(imgIndex<0)
{
imgIndex=0;
var divgo = document.getElementById("yecoladv_left");
var src = divgo.style.backgroundImage;
//alert(src);
src = src.replace("_o.jpg","_s.jpg");
//alert(src);
divgo.style.backgroundImage = src;
//var divgos = document.getElementById("yecoladv_right");
//var src = divgo.style.backgroundImage;
//alert(src);
//src = src.replace(".jpg","_s.jpg");
//alert(src);
//divgo.style.backgroundImage = src;
}
createAdvContorl(imgIndex);
changenowimg('conImgDiv_'+mowimgArrays[0]);
}
goToRight = function()
{
imgIndex +=5;
if(imgIndex>imgCount)
{
imgIndex=imgCount-5;
var divgos = document.getElementById("yecoladv_right");
var src = divgo.style.backgroundImage;
src = src.replace("_o.jpg","_s.jpg");
divgo.style.backgroundImage = src;
}
createAdvContorl(imgIndex);
changenowimg('conImgDiv_'+mowimgArrays[0]);
}
createAdv();
changenowimgs('conImgDiv_'+mowimgArrays[0]);
var Interval = 0;
Interval=window.setInterval(function(){
var j ;
if(tempIndex<5)
{
j=mowimgArrays[tempIndex];
}
else
{
tempIndex=0;
j=mowimgArrays[tempIndex];
}
tempIndex+=1;
changenowimgs('conImgDiv_'+j);
},3000);//通过这里设置轮换时间，以
js+css+Div 广告轮换代码
4星 · 超过85%的资源 需积分: 9 81 浏览量
2009-08-13
18:14:49
上传
评论 1
收藏 1.24MB RAR 举报 
ideaskinADV.rar （33个子文件） 
adv_images 
5.jpg 25KB 3.jpg 61KB 8.jpg 28KB 4.jpg 34KB 9.jpg 243KB 2.jpg 67KB 10.jpg 581KB 1.jpg 72KB 11.jpg 60KB 6.jpg 22KB 0.jpg 42KB 7.jpg 28KB lr 4_s.jpg 11KB 4.jpg 11KB 1.jpg 11KB
Thumbs.db 13KB 1_s.jpg 11KB 4_o.jpg 11KB 1_o.jpg 11KB adv_images_s 5.jpg 7KB 3.jpg 7KB 8.jpg 11KB 4.jpg 7KB 9.jpg 7KB 2.jpg 7KB 10.jpg 11KB 1.jpg 7KB Thumbs.db 18KB 11.jpg 11KB 6.jpg 7KB 0.jpg 7KB 7.jpg 11KB
yecoladvs.html 8KB资源评论
uyaboy2014-02-21代码可以正常使用，就是样式不是很喜欢
sglnd2013-05-06有点老了。
