时间戳

首页 > 解决方案 > 为什么我不能在两个电影项目和箭头之间添加空格以使项目不再响应？

javascript - 为什么我不能在两个电影项目和箭头之间添加空格以使项目不再响应？

问题描述

为了制作自己的电影网站，我使用 JavaScript 从 TMDB 收集数据。但在此之前，我创建了 JavaScript 代码来单击箭头以在我的电影 img（电影列表项）之间滑动。问题是在我使用 JavaScript 从 TMDB 收集数据后，箭头不再响应。然后，在我从 TMDB 收集数据后，我找不到在两部电影 img（项目）之间悬停一个 img 前后腾出空间的方法。这是我的代码：

const arrow = document.querySelectorAll(".arrow");
const movieList = document.querySelectorAll(".movie-list");

arrow.forEach((arrow,i)=>{
    const itemNumber = movieList[i].querySelectorAll("img").length;
    let clickCounter=0;
arrow.addEventListener("click",()=>{
    const ratio = Math.floor(window.innerWidth/270);

    clickCounter++;
    if(itemNumber-(4+clickCounter +(4-ratio))>=0){
        movieList[i].style.transform=`translateX(${movieList[i].computedStyleMap().get("transform")[0].x.value-300
    }px)`;

    }else{
        movieList[i].style.transform="translateX(0)";
        clickCounter=0;
    }
   
});
console.log(Math.floor(window.innerWidth/270));
});



//Toggle
const ball = document.querySelector(".toggle-ball");
const items= document.querySelectorAll(".content-container,.navbar-container,.logo,.menu-list-item,.icon,.profile-text-container,.toggle,.container,.movie-list-item,.movie-list-title");

ball.addEventListener("click", ()=>{
items.forEach((item) => {
    item.classList.toggle("active");
});
ball.classList.toggle("active");
});




//TMDB

const API_KEY='api_key=c63b222797fcafec10a38c8fc986d2c5';
const BASE_URL='https://api.themoviedb.org/3';
const API_URL=BASE_URL+'/discover/movie?sort_by=popularity.desc&'
+API_KEY;
const IMG_URL=`https://image.tmdb.org/t/p/w500`;

const main=document.getElementById(`main`);
getMovies(API_URL)

function getMovies(url){
    fetch(url).then(res => res.json()).then(data => {
       console.log(data.results)
        showMovies(data.results);
    })
}



function showMovies(data){
main.innerHTML='';

    data.forEach(movie => {
        const {title,poster_path,vote_average,overview}=movie;
        const movieE1= document.createElement('div');
        movieE1.classList.add('movie');
        movieE1.innerHTML=`
        <img class="movie-list-item-img" src="${IMG_URL+poster_path}" alt="${title}">
                    <div class="movie-title">${title}
                        <span class="${getColor(vote_average)}">${vote_average}</span>
                    </div>
                    <div class="movie-icon">
                        <span class="movie-list-item-icon"><i class="fas fa-play"></i></span>
                        <span class="movie-list-item-icon"><i class="fas fa-plus"></i></span>
                        <span class="movie-list-item-icon"><i class="far fa-thumbs-up"></i></i></span>
                        <span class="movie-list-item-icon"><i class="far fa-thumbs-down"></i></i></span>
                        <span class="movie-list-item-icon"><i class="fas fa-chevron-down"></i></i></i></span>
                    </div> 
                    <div class="movie-list-desc">
                        <p >${overview}</p>
                    </div>
                        <div class="movie-list-type">
                            <p > Romantic . Action</p> 
                        </div>

             `
             main.appendChild(movieE1);
    });
}


function getColor(vote) {
    if(vote>=8){
        return 'green'
    }
    else if (vote >= 5){
        return `orange`
    }else{
        return `red`
    }
}
*{
    margin: 0;
}

body{
    font-family: 'Roboto', sans-serif;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    cursor:default;
}

main{
    display: flex;
    
}

.navbar{
    width: 100%;
    height: 65px;
    background-color: rgb(20,20,20);
    position: fixed;
}

.navbar-container{
    display:flex;
    align-items: center;
    background-color:rgb(20,20,20);
    padding: 0 50px;
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

.logo-container{
    flex:1;
    align-items: center;
}

.logo{
    font-family: 'Ephesis', cursive;
    font-size: 30px;
    color: rgb(76, 240, 76);
    cursor: pointer;
}

.menu-container{
    flex:6;
}

.menu-list{
    display: flex;
    list-style: none;
    color:rgba(255, 255, 255, 0.863);
}

.menu-list-item{
    font-size: 15px;
    margin-right: 20;
    cursor: pointer;
    color:lightgreen;
}



.profile-container{
    flex:2;
    color: white;
    display: flex;
    align-items:center;
    justify-content: flex-end;
    margin-right: 10;
}

.profile-picture{
    width: 35px;
    height: 35px;
    border-radius: 10%;
    object-fit: cover;
    margin-right: 10;
}

.icon{
    margin-right: 30;
    align-items: center;
    justify-content: center;
    font-size: larger;
    cursor: pointer;
}

.profile-text-container{
    cursor: pointer;
}

.toggle{
    width: 40px;
    height: 20px;
    background-color: white;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    margin-right: 30;
}

.toggle-icon{
    color: goldenrod;
}

.toggle-ball{
    width: 18px;
    height: 18px;
    background-color: #151515;
    position:absolute;
    right: 1px;
    border-radius: 50%;
    cursor: pointer;
    transition: 1s ease all;
}

.container{
    background-color: rgb(31, 29, 29);
    height:auto;
    width: auto;
}

.content-container{
 color:white;
background-color: rgb(31, 29, 29);
}

.featured-content{
    padding: 60px;
    height: 87vh;
    color: white;

    
}

.featured-title{
    margin-top: 130px;
    font-family: 'Ephesis', cursive;
    color: white;
    width: 50px;
    background-color: rgb(31, 29, 29);
}

.movie-title span{
    background-color: var(--primary-color);
    /* padding: 1.5rem 0.5rem; */
    border-radius: 3px;
    font-weight: bold;
    
}
.movie-title span.green{
    color: rgb(76, 240, 76);
}

.movie-title span.orage{
    color: orangered;
}

.movie-title span.green{
    color: red;
}

.featured-description{
    width: 600px;
    color: lightgrey;
    margin: 30px 0;
    background-color: red;
}

.featured-button{
    font-family: 'Roboto', sans-serif;
    background-color:white;
    color:black;
    padding: 10px 10px;
    width: 130px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: space-around;
    display: flex;
    margin-right: 30;
}



.movie-list-container{
    margin-left: 50px;
    margin-top: -16vh;
    height:80vh;
    overflow:hidden;
    padding: 20px;
}

.movie-list-wrapper{
   position: relative;
   display: flex;
   /* overflow: hidden; */
}

.movie-list{
    position: relative;
    /* position: absolute; */
    padding-top: 50px;
    display: flex;
    align-items: center;
    height:600px;
    transform: translateX(0);
}

.movie-list-title{
    font-size: 23px;
}

.movie-list-item{
    position: absolute;
    margin-top: -200px;
    /* margin-right: 50px; */
    position: relative;
    border-radius: 10px;
}

.movie-list-item:hover .movie-list-item-img {
    margin-top: -140px;
    padding-left:58px;
    padding-right: 58px;
    transform: scale(1.5,1.5);
    opacity: 1;
    position: relative;
}

.movie-list-item:hover{
    background-color: black;
    padding: auto;
 
}

.movie-list-item:hover .green{
    margin-left: 300px;
}

.movie-list-item:hover .movie-list-item-icon{
    opacity: 1;
}

.movie-list-item:hover .movie-title{
    opacity: 1;
}

.movie-list-item:hover .movie-list-desc{
    opacity: 1;
}

.movie-list-item:hover .movie-list-type{
    opacity: 1;
}

.movie-icon{
    padding-left: 37px;
    margin-left: 20px;
    margin-top: 1px;
    cursor:pointer;
    align-items: center;
    justify-content: space-around;
    /* position: relative; */
    transform: scale(1.5,1.5);
}

.movie-title{
    padding-left: 15px;
    margin-top: 50px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    /* overflow:hidden; */
}

.movie-list-item-icon{
    padding-left: 13px;
    border-radius: 50%;
    width: 50px;
    margin-right: -5px;
    opacity: 0;
    transition: all 0.5s ease-in-out;

}

.movie-list-item-img{
    transition: all 0.5s ease-in-out;
    width: 235px;
    height: 136px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
}

.movie-list-desc{
    font-size: 10px;
    padding-left: 15px;
    margin-top: 25px;
    cursor:pointer;
    align-items: center;
    justify-content: space-around;
    position: relative;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.movie-list-type{
    padding-left: 15px;
    margin-top: 7px;
    cursor:pointer;
    align-items: center;
    justify-content: space-around;
    position: relative;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    /* overflow: hidden; */
}

.arrow{
    font-size: 80px;
    position: absolute;
    top: 45px;
    right: 0;
    color: whitesmoke;
    opacity: .5;
    cursor: pointer;
}

.content-container.active{
    background-color: white;
}

.navbar-container.active{
background-color:whitesmoke;
color:black;
}


.toggle.active{
    background-color: black;
}

.toggle-ball.active{
    background-color: white;
    transform: translateX(-20px);
}

.logo.active{
    color: rgb(189, 26, 26);
}

.menu-list-item.active{
    color: rgb(235, 17, 50);
    font-weight: bold;
}

.icon.active{
    color: rgb(235, 17, 50);
}
.profile-text-container.active{
    color: rgb(235, 17, 50);
}

.movie-list-title.active{
    color:rgb(235, 17, 50);
}

.movie-list-item:hover.active{
    background-color: whitesmoke;
    color: rgb(235, 17, 50);
    border-color: tomato;
}

@media only screen and (max-width:940px){
    .menu-container{
        display: none;
    }
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Ephesis&family=Roboto:ital,wght@0,100;0,300;1,300;1,400;1,700&family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
    <title>Movie Website</title>
</head>
<body>

    <div class="navbar">
        <div class="navbar-container">
        <div class="logo-container"><h1 class="logo">Matcha Lattee</h1></div>
        <div class="menu-container">
           <ul class="menu-list">
               <li class="menu-list-item">Trang Chủ&lt;/li>
               <li class="menu-list-item">Thể Loại</li>
               <li class="menu-list-item">Phim Đề Cử&lt;/li>
               <li class="menu-list-item">TV Shows</li>
               <li class="menu-list-item">Phim Bộ&lt;/li>
               <li class="menu-list-item">Phim Lẻ&lt;/li>             
               <li class="menu-list-item">Anime</li>
               <li class="menu-list-item">Tủ Phim</li>
           </ul>
        </div>
        <div class="profile-container">
            <div class="toggle">
                <i class="fas fa-moon toggle-icon"></i>
                <i class="fas fa-sun toggle-icon"></i>
                <div class="toggle-ball"></div>
            </div>
            <div class="icon">
                <span><i class="fas fa-search"></i></span>
            </div>
            <div class="icon">
                <span><i class="fas fa-bell"></i></span>
            </div>
            <img class="profile-picture" src="img/0.jpg" alt="">
        <div class="profile-text-container">
            <span class="dropdown-profile"></span>
            <i class="fas fa-caret-down"></i>         
        </div>
        </div>
        </div>
    </div>

    <div class="container">
        <div class="content-container">
          <div class="featured-content"
          style="background:linear-gradient(to bottom, rgba(0,0,0,0),#151515),url('img/0.jpg')">
            <div class="featured-title">Matcha</div>  
        <p class="featured-description">What is movie description?
            A movie, or film, is a type of visual communication which uses moving pictures and sound to tell stories or teach people something. Most people watch (view) movies as a type of entertainment or a way to have fun.What is movie description?
            A movie, or film, is a type of visual communication which uses moving pictures and sound to tell stories or teach people something. Most people watch (view) movies as a type of entertainment or a way to have fun.What is movie description?
            A movie, or film, is a type of visual communication which uses moving pictures and sound to tell stories or teach people something. Most people watch (view) movies as a type of entertainment or a way to have fun.</p>
         <button class="featured-button"><i class="fas fa-play"></i>Play</button>   
    </div>  
    
    <div class="movie-list-container">
        <h1 class="movie-list-title">Phim Mới Ra</h1>
        <div class="movie-list-wrapper">
            <div class="movie-list">
                <div class="movie-list-item">
                    <main id="main">
                    <img class="movie-list-item-img" src="img/2.jpg" alt="">
                    <div class="movie-title">SQUID GAME
                        <span class="green">6.8</span>
                    </div>
                    <div class="movie-icon">
                        <span class="movie-list-item-icon"><i class="fas fa-play"></i></span>
                        <span class="movie-list-item-icon"><i class="fas fa-plus"></i></span>
                        <span class="movie-list-item-icon"><i class="far fa-thumbs-up"></i></i></span>
                        <span class="movie-list-item-icon"><i class="far fa-thumbs-down"></i></i></span>
                        <span class="movie-list-item-icon"><i class="fas fa-chevron-down"></i></i></i></span>
                    </div> 
                    <div class="movie-list-desc">
                        <p > 13+</p>
                    </div>
                        <div class="movie-list-type">
                            <p > Romantic . Action</p> 
                        </div>  
                        </main>                                              
                </div>
                
                                                
</div>
<i class="fas fa-chevron-right arrow"></i>    
        </div>
    </div>
        </div>
    </div>
      <script src="TMDB.js"></script>      
   <script src="Toggle-And-Sliding-List.js"></script>
</body>
</html>

标签： javascripthtmlcss

解决方案

推荐阅读