HTML实现banner图切换

最新推荐文章于 2024-05-16 09:56:42 发布

开心肖肖乐-

最新推荐文章于 2024-05-16 09:56:42 发布

阅读量9.1k

点赞数 7

分类专栏： js HTML CSS

本文链接：https://blog.csdn.net/weixin_45750195/article/details/105726597

版权

HTML 同时被 3 个专栏收录

19 篇文章 2 订阅

订阅专栏

CSS

16 篇文章 1 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

首先呢，我们做出来的效果去下图，这里只是简单的写的文字，如果需要更好的话，可以自己添加或修改。（这里图片大小没有统一，有一丢丢影响效果）
在这里插入图片描述
接下来我们来看看详细的代码

HTML部分：

这里主要设置了三个盒子并列。一个存放banner图、一个是左侧的黑色背景还有一个是左侧的文字。（因为这里是设置了黑色盒子的背景透明度，为了实现背景透明、文字不透明，所以这里用的是两个盒子通过设置位置来实现的。）
存放文字的盒子里面设置了若干个盒子，开始下他的排列布局。

代码：

<body>
   <div id="banner"></div>
   <div class="list"></div>
   <div class="text">
   	<div οnmοuseοver="pic(0)">HUAWEI P40系列</div>
   	<div οnmοuseοver="pic(1)">nova 7 Pro</div>
   	<div οnmοuseοver="pic(2)">华为 畅享10</div>
   	<div οnmοuseοver="pic(3)">HUAWEI Mate30 系列</div>
   	<div οnmοuseοver="pic(4)">nova 6</div>
   	<div οnmοuseοver="pic(5)">华为智慧屏</div>
   	<div οnmοuseοver="pic(6)">智慧进阶 新品盛典</div>
  	<div οnmοuseοver="pic(7)">华为路由AX3 | AX3 Pro</div>
  	<div οnmοuseοver="pic(8)">HUAWEI WATCH GT2e</div>
  	<div οnmοuseοver="pic(9)">HUAWEI MatePad</div>
   </div>
 </body>

CSS部分：

css就主要是设置了一些基本的样式。

代码：

//设置banner图
#banner{
 width: 100%;
 height: 700px;
 background: url(img/1.png) no-repeat;
 background-size: contain;
}
//背景盒子和存放文字的盒子
.list,.text{
 position: absolute;
 right: 5%;
 width: 20%;
 height: 700px;
 margin-top: -700px;
}
.list{
 background-color: black;
 filter: opacity(0.6);
}
//设置文字的的样式
.text div{
 width: 100%;
 height: 70px;
 text-align: center;
 font-size: 15px;
 line-height: 70px;
}
//设置鼠标悬停在存放文字盒子时的样式
.text div:hover{
 color: white;
 font-size: 25px;
 line-height: 70px;
 background-color: #000000;
}

JS部分：

前面我们就把基本样式设置好了，这一部分就是来设置当鼠标悬停在对应的文字div上就显示相应的图片。

代码：

//获取banner元素
var a =document.getElementById('banner');
//定义图片的路径，存放到数组
var url=[
'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.png)',
   ];
 //定义显示函数
function pic(index){
   //通过循环和判断语句，如果传过来的参数和i对应，那么久吧数组的第i个值赋值给banner的背景图片属性。
   for(var i=0;i<10;i++){
    if(i==index){
     a.style.backgroundImage=url[i];
    }
   }
}

到这里我们就完成了上面图片中的效果。

开心肖肖乐-

关注

7
点赞
踩
69

收藏

觉得还不错? 一键收藏
3
评论
HTML实现banner图切换

首先呢，我们做出来的效果去下图，这里只是简单的写的文字，如果需要更好的话，可以自己添加或修改。（这里图片大小没有统一，有一丢丢影响效果）接下来我们来看看详细的代码HTML部分：这里主要设置了三个盒子并列。一个存放banner图、一个是左侧的黑色背景还有一个是左侧的文字。（因为这里是设置了黑色盒子的背景透明度，为了实现背景透明、文字不透明，所以这里用的是两个盒子通过设置位置来实现的。）存放...
复制链接

扫一扫