一个新闻轮播图

最新推荐文章于 2023-09-12 13:51:28 发布

zheng_peiqiang

最新推荐文章于 2023-09-12 13:51:28 发布

阅读量453

点赞数

文章标签： html js

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

版权

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="pt"/>
<meta name="description" content="pt"/>
<title>
   pt
</title>
<style>
   #zong{width:640px;height:349.5px;margin:100px auto;overflow:hidden;}
   #bwai{width:1932px;height:275px;}
   #bimg{width:640px;height:275px;position:absolute;}
   #swai{width:1932px;height:70.5px;}
   .simg{width:157px;height:66.5px;float:left;margin-right:4px;margin-top:4px;}
   .red{border:2px solid red;width:153px;height:62.5px;}
   #left{width:30px;height:100px;background:gray;position:absolute;opacity:0;margin-top:100px;margin-left:30px;cursor:pointer;}
   #right{width:30px;height:100px;background:gray;position:absolute;opacity:0;margin-top:100px;margin-left:580px;cursor:pointer;}
</style>
</head>
<body>
<div id="zong">
<div id="bwai">
   <div id="bimg"></div>
   <div id="left"></div>
   <div id="right"></div>
</div>
<div id="swai">
   <div class="simg" style="border:2px solid red;width:153px;height:62.5px"></div>
   <div class="simg"></div>
   <div class="simg"></div>
   <div class="simg"></div>
   <div class="simg"></div>
   <div class="simg"></div>
   <div class="simg"></div>
   <div class="simg"></div>
   <div class="simg"></div>
   <div class="simg"></div>
   <div class="simg"></div>
   <div class="simg"></div>
</div>
</div>
<script>
spic=new Array(
"url(img/1.png)",
"url(img/2.png)",
"url(img/3.png)",
"url(img/4.png)",
"url(img/5.png)",
"url(img/6.png)",
"url(img/7.png)",
"url(img/8.png)",
"url(img/9.png)",
"url(img/10.gif)",
"url(img/11.png)",
"url(img/12.jpg)");
simg=document.getElementsByClassName('simg');
bimg=document.getElementById('bimg');
swai=document.getElementById('swai');
bwai=document.getElementById('bwai');
left=document.getElementById('left');
right=document.getElementById('right');
bimg.style.background=spic[0];
bimg.style.backgroundSize="100%";
for(var i=0;i<simg.length;i++){
   simg[i].id=i;
   simg[i].style.background=spic[i];
   simg[i].style.backgroundSize="100%";
   simg[i].οnmοuseοver=function(){
    num=Number(this.id);
    bh();
   }
}
bwai.οnmοuseοver=function(){
   lr();
   clearInterval(tt);
}
bwai.οnmοuseleave=function(){
   left.style.opacity="0";
   right.style.opacity="0";
   if(num<11){
    tt=setInterval(aa,2000);
   }
}
swai.οnmοuseοver=function(){
   clearInterval(tt);
}
swai.οnmοuseοut=function(){
   tt=setInterval(aa,2000);
}
tt=setInterval(aa,2000);
var num=0;
function aa(){num++;console.log(num);zz(num);}
left.οnclick=function(){if(num==0){num=12;}console.log(num);num--;zz(num);}
right.οnclick=function(){num++;if(num==12){num=0;}zz(num);}
function zz(num){
   bh();
   if(num<2){swai.style.marginLeft="0px";}
   else if(num>=2 && num<11){swai.style.marginLeft="-"+161*(num-2)+"px";}
   else if(num==11){swai.style.marginLeft="-"+161*(num-3)+"px";clearInterval(tt);}
}
function lr(){
   left.style.opacity="0.8";
   right.style.opacity="0.8";
}
function bh(){
   bimg.style.backgroundImage=spic[num];
   for(var i=0;i<simg.length;i++){
    simg[i].style.border="none";
    simg[i].style.width="157px";
    simg[i].style.height="66.5px";
   }
   simg[num].style.border="2px solid red";
   simg[num].style.width="153px";
   simg[num].style.height="62.5px";
}
</script>
</body>
</html>

图片：

效果图：

zheng_peiqiang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个新闻轮播图

pt #zong{width:640px;height:349.5px;margin:100px auto;overflow:hidden;} #bwai{width:1932px;height:275px;} #bimg{width:640px;height:275px;position:absolute;} #swai{width:1932px;
复制链接

扫一扫