一个图片切换功能

最新推荐文章于 2024-04-24 09:27:42 发布

zheng_peiqiang

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量278

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/zhengpeiqiang183/article/details/53708146

版权

<html>
<head>
<meta charset="utf-8">
     <meta name="keyword" content="1">
     <meta name="description" content="1">
     <style>
   *{margin:0;padding:0;}
   #wai{width:1200px;margin:50px auto;}
   #a{width:900px;height:600px;float:left;}
   #b{width:300px;height:600px;float:left;}
   #abg{width:900px;height:600px;position:absolute;z-index:1;}
   #text{width:900px;height:100px;position:absolute;top:550px;z-index:1;background:cyan;opacity:0;text-align:center;font-size:35px;line-height:100px;}
   .bbg{width:300px;height:200px;position:absolute;z-index:0;}
     </style>
</head>
<body>
<div id="wai">
<div id="a">
   <img src="4.jpg" id="abg" alt='WINTER'>
   <div id="text">
   </div>
</div>
<div id="b">
   <img src="1.jpg" id="bbg0" class="bbg" alt='SUMMER'>
   <img src="2.jpg" id="bbg1" class="bbg" alt='SPRING'>
   <img src="3.jpg" id="bbg2" class="bbg" alt='AUTUMN'>
</div>
</div>
<script>
bbg=document.getElementsByClassName('bbg');
abg=document.getElementById('abg');
te=document.getElementById('text');
abg.οnmοuseοver=function(){
   te.innerHTML=abg.alt;
   //alert(abg.text);
   te.style.opacity="0.8";
}
abg.οnmοuseοut=function(){
   te.style.opacity="0";
}
abg.οnclick=function(){
   url=abg.src.replace(".jpg","");
   window.location.href=''+url+'.html';
}

bbg0=document.getElementById('bbg0');
bbg1=document.getElementById('bbg1');
bbg2=document.getElementById('bbg2');
b=document.getElementById('b');
for(var i=0;i<bbg.length;i++){
   bbg[i].style.top=i*200+50+"px";
}
bbg0.οnclick=function(){
   oo=setInterval(aa,1);
}
bbg1.οnclick=function(){
   pp=setInterval(bb,1);
}
bbg2.οnclick=function(){
   qq=setInterval(cc,1);
}
al=abg.offsetLeft;at=abg.offsetTop;ah=abg.offsetHeight;aw=abg.offsetWidth;
bl0=bbg0.offsetLeft;bt0=bbg0.offsetTop;bh0=bbg0.offsetHeight;bw0=bbg0.offsetWidth;
bl1=bbg1.offsetLeft;bt1=bbg1.offsetTop;bh1=bbg1.offsetHeight;bw1=bbg1.offsetWidth;
bl2=bbg2.offsetLeft;bt2=bbg2.offsetTop;bh2=bbg2.offsetHeight;bw2=bbg2.offsetWidth;
var n=0;
function aa(){
   te.style.opacity="0";
   temp=b.offsetLeft;
   n++;
   abg.style.left=abg.offsetLeft+9+"px";
   abg.style.top=abg.offsetTop+0+"px";
   abg.style.height=abg.offsetHeight-4+"px";
   abg.style.width=abg.offsetWidth-6+"px";
    bbg0.style.left=bbg0.offsetLeft-9+"px";
    bbg0.style.top=bbg0.offsetTop-0+"px";
    bbg0.style.height=bbg0.offsetHeight+4+"px";
    bbg0.style.width=bbg0.offsetWidth+6+"px";
   if(abg.offsetLeft>=temp){
    clearInterval(oo);oo=0;n=0;
    abg.style.left=al;
    abg.style.top=at;
       abg.style.height=ah;
       abg.style.width=aw;
    bbg0.style.left=bl0;
    bbg0.style.top=bt0;
       bbg0.style.height=bh0;
       bbg0.style.width=bw0;

    imgtemp=abg.src;
    abg.src=bbg0.src;
    bbg0.src=imgtemp;

    alttemp=abg.alt;
    abg.alt=bbg0.alt;
    bbg0.alt=alttemp;
   }
}
function bb(){
   te.style.opacity="0";
   temp=b.offsetLeft;
   n++;
   abg.style.left=abg.offsetLeft+9+"px";
   abg.style.top=abg.offsetTop+2+"px";
   abg.style.height=abg.offsetHeight-4+"px";
   abg.style.width=abg.offsetWidth-6+"px";
    bbg1.style.left=bbg1.offsetLeft-9+"px";
    bbg1.style.top=bbg1.offsetTop-2+"px";
    bbg1.style.height=bbg1.offsetHeight+4+"px";
    bbg1.style.width=bbg1.offsetWidth+6+"px";
   if(abg.offsetLeft>=temp){
    clearInterval(pp);n=0;
    abg.style.left=al;
    abg.style.top=at;
       abg.style.height=ah;
       abg.style.width=aw;
    bbg1.style.left=bl1;
    bbg1.style.top=bt1;
       bbg1.style.height=bh1;
       bbg1.style.width=bw1;
    imgtemp=abg.src;
    alttemp=abg.alt;
    abg.src=bbg1.src;
    abg.alt=bbg1.alt;
    bbg1.src=imgtemp;
    bbg1.alt=alttemp;
   }
}
function cc(){
   te.style.opacity="0";
   temp=b.offsetLeft;
   n++;
   abg.style.left=abg.offsetLeft+9+"px";
   abg.style.top=abg.offsetTop+4+"px";
   abg.style.height=abg.offsetHeight-4+"px";
   abg.style.width=abg.offsetWidth-6+"px";
    bbg2.style.left=bbg2.offsetLeft-9+"px";
    bbg2.style.top=bbg2.offsetTop-4+"px";
    bbg2.style.height=bbg2.offsetHeight+4+"px";
    bbg2.style.width=bbg2.offsetWidth+6+"px";
   if(abg.offsetLeft>=temp){
    clearInterval(qq);n=0;
    abg.style.left=al;
    abg.style.top=at;
       abg.style.height=ah;
       abg.style.width=aw;
    bbg2.style.left=bl2;
    bbg2.style.top=bt2;
       bbg2.style.height=bh2;
       bbg2.style.width=bw2;
    imgtemp=abg.src;
    alttemp=abg.alt;
    abg.src=bbg2.src;
    abg.alt=bbg2.alt;
    bbg2.src=imgtemp;
    bbg2.alt=alttemp;
   }
}
</script>
</body>
</html>

zheng_peiqiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个图片切换功能

*{margin:0;padding:0;} #wai{width:1200px;margin:50px auto;} #a{width:900px;height:600px;float:left;} #b{width:300px;height:600px;float:left;} #abg{width:900px;height:600px;position:abs
复制链接

扫一扫