HTML实现banner图切换
生活随笔
收集整理的這篇文章主要介紹了
HTML实现banner图切换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先呢，我們做出來的效果去下圖，這里只是簡單的寫的文字，如果需要更好的話，可以自己添加或修改。（這里圖片大小沒有統一，有一丟丟影響效果）
接下來我們來看看詳細的代碼
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];}} }到這里我們就完成了上面圖片中的效果。
總結
以上是生活随笔為你收集整理的HTML实现banner图切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 翟佳：高可用、强一致、低延迟——Book
- 下一篇： 前端学习之路---node.js（二）