溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么使用原生JS實現愛奇藝首頁導航欄，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
最近接到領導的任務，要給外面的學生上幾節前端課，備課的時候準備了一些小項目，在此記錄一下。
以下是愛奇藝首頁的一個導航欄，用原生js寫的，靜態頁面效果如下：
代碼如下：
<html>
<head>
<title>愛奇藝</title>
<meta charset="utf-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.wrap {
height: 520px;
background-color: #000;
width: 100%;
}
.wrap .img-wrap {
height: 100%;
margin: 0 auto;
background-image: url('1.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: auto 100%;
position: relative;
}
/* 媒體查詢 */
@media screen and (max-width: 2000px) {
.wrap .img-wrap .item-list {
right: 10%;
}
}
@media screen and (max-width: 1600px) {
.wrap .img-wrap .item-list {
right: 8%;
}
}
@media screen and (max-width: 1300px) {
.wrap .img-wrap .item-list {
right: 5%;
}
}
.wrap .img-wrap .item-list {
box-sizing: border-box;
height: 100%;
background-color: rgba(0,0,0,0.7);
width: 280px;
position: absolute;
list-style: none;
padding: 10px 0;
}
.wrap .img-wrap .item-list li {
padding: 0 15px;
}
.wrap .img-wrap .item-list li.active {
/*background-color: -webkit-linear-gradient(left, rgba(0,0,0,.3), rgba(0,0,0,0.1));*/
background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0));
cursor: pointer;
}
.wrap .img-wrap .item-list li span {
line-height: 40px;
color: #eee;
font-size: 16px;
}
.wrap .img-wrap .item-list li.active span {
color: #00be06;
display: block;
}
.wrap .img-wrap .item-list li.active span:nth-child(1) {
font-size: 24px;
transition: font-size 0.2s;
}
.wrap .img-wrap .item-list li.active span:nth-child(2) {
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<div class="img-wrap">
<ul class="item-list">
</ul>
</div>
</div>
<script type="text/javascript">
let items = [
{
title: '遇見幸福',
desc: '24點體會人生百味',
url: '1.jpg'
},
{
title: '中國達人秀',
desc: '真假岳岳在線劈叉',
url: '2.jpg'
},
{
title: '中國新說唱',
desc: '全國4強誕生！',
url: '3.jpg'
},
{
title: '做家務',
desc: '魏大勛花錢做音樂',
url: '4.jpg'
},
{
title: '掃毒2',
desc: '劉德華硬戰古天樂',
url: '5.jpg'
},
{
title: '加油',
desc: '郝澤寧隔屏告白福子',
url: '6.jpg'
},
{
title: '小歡喜',
desc: '宋倩喬衛東重歸于好',
url: '7.jpg'
},
{
title: '謀愛上癮',
desc: '契約夫婦遇感情危機',
url: '8.jpg'
},
{
title: '此食此客',
desc: '啤酒花蛤夏日絕配',
url: '9.jpg'
},
{
title: '愛奇藝特別策劃',
desc: '我們的70年',
url: '10.jpg'
}
]; // 需要展示的數據，通常從后端獲取
let curIndex = 0; // 當前索引
let isAutoMove = true; // 是否可以自動改變圖片
let interval = 1000; // 自動輪播的間隔時間
// 封裝函數：生成新的標簽
function createTag(tag) {
return document.createElement(tag);
}
// 封裝函數：生成文本節點
function createText(text) {
return document.createTextNode(text);
}
// 封裝函數：初始化列表
function initItemList() {
let ul = document.getElementsByClassName('item-list')[0];
for (let i = 0; i < items.length; i++) {
let li = createTag('li');
if (i == 0) { li.classList.add('active') }
let span1 = createTag('span');
let span2 = createTag('span');
let span3 = createTag('span');
let text1 = createText(items[i].title);
let text2 = createText('：');
let text3 = createText(items[i].desc);
span1.appendChild(text1);
span2.appendChild(text2);
span3.appendChild(text3);
li.appendChild(span1);
li.appendChild(span2);
li.appendChild(span3);
ul.appendChild(li);
addHoverListener(li, i);
}
}
// 鼠標hover右側欄時改變背景圖片及文字樣式
function addHoverListener(trigger, index) {
trigger.addEventListener('mouseenter', function () {
curIndex = index; // 保存當前索引
changeImage();
activeText();
});
}
// 根據index改變背景圖片
function changeImage() {
console.log('curIndex: ', curIndex);
let imgUrl = items[curIndex].url;
let imgWrap = document.getElementsByClassName('img-wrap')[0];
imgWrap.style.cssText = "background-image: url('" + imgUrl + "')";
}
// 根據index改變右側激活文本的樣式
function activeText() {
let activeObj = document.getElementsByClassName('active')[0];
let li = document.getElementsByTagName('li')[curIndex];
if (activeObj) {
activeObj.classList.remove('active');
}
li.classList.add('active');
}
// 鼠標移入移出wrap區域時響應關閉、開啟自動輪播
function addEnterListener() {
let wrap = document.getElementsByClassName('wrap')[0];
wrap.addEventListener('mouseenter', function () {
isAutoMove = false;
});
wrap.addEventListener('mouseleave', function () {
isAutoMove = true;
});
}
// 定時切換圖片：使用定時器setInterval(function(){}, time)
function autoMove() {
let timer = setInterval(function () {
if (isAutoMove) {
if (curIndex < 9) {
curIndex ++;
} else {
curIndex = 0;
}
changeImage();
activeText();
}
}, interval);
}
window.onload = function () {
initItemList();
addEnterListener();
autoMove();
}
</script>
</body>
</html>看完了這篇文章，相信你對“怎么使用原生JS實現愛奇藝首頁導航欄”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
