<!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" οnclick="gotToLeft()" οnmοuseοver="mouseOver('yecoladv_left')" style="background-image:url(lr/1.jpg)" οnmοuseοut="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" οnclick="goToRight()" οnmοuseοver="mouseOver('yecoladv_right')" style="background-image:url(lr/4.jpg)" οnmοuseοut="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="存放图片链接的地址,以竖线"|"隔开数量要和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;' οnclick=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);//通过这里设置轮换时间,以毫秒为单位,如3000,即3秒
</script>
</html>
轮换图广告控件 JS +DIV+CSS实现
最新推荐文章于 2021-08-03 21:11:18 发布