程序博客网 > 数据库中update的用法

轮换图广告控件 JS +DIV+CSS实现

来源：互联网 发布：数据库中update的用法 编辑：程序博客网 时间：2024/05/21 22:53

 <!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);//通过这里设置轮换时间，以毫秒为单位,如3000，即3秒
</script>
</html>

数据库中update的用法 数据库中update的用法
原创粉丝点击
热门IT博客
qstring转char数组qstring转char数组
程序员英语词汇app程序员英语词汇app
四选一数据选择器芯片
京东代理商网络诈骗
oracle数据库统计分析
c语言产生0 1随机数
2016淘宝客推广技巧
python 记录访客数据
网络摄像机安装过程
美白系列水乳 知乎
水经注软件破解版
clean my mac
windows手动更新补丁
知乎 英法百年战争
手机淘宝秒杀
win10平板优化精简版
淘宝卖坐骑要建dk号
做摩卡拼图的软件
淘宝的伞黑胶都在外面
网络四大神书epub
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 阿豆 黑皮笔记本 黑盘和蓝盘 黑盘蓝盘 黑盘 硬盘黑盘和蓝盘的区别 硬盘蓝盘和黑盘的区别 小金刚盘黑了补救方法 西数黑盘m.2 蓝盘和黑盘 黑盘是什么意思 西数蓝盘和黑盘 硬盘黑盘 西部数据黑盘 红盘 绿盘和蓝盘的区别 西部数据蓝盘 小叶紫檀手串盘黑了怎么办 松树明子手串为什么越盘越黑 黑石上层 石黑京在线播放 黑石 怀旧服黑石深渊 黑石深渊钥匙任务 黑石戒指 魔兽怀旧服黑石深渊任务 黑石领主轮回之路 黑石深渊救公主 魔兽世界黑石深渊 黑石深渊任务图文攻略 黑石深渊aa队 黑石深渊aa 魔兽黑石深渊任务 魔兽世界黑石深渊任务 怀旧服猎人黑石深渊拉怪教学 黑石深渊任务联盟 黑石深渊路线 魔兽世界黑石深渊任务大全 黑石深渊钥匙 黑石深渊副本掉落装备一览表 黑石深渊救公主第一步在哪接 黑石深渊攻略

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里