证明 slider 与 object 构造函数

Question

I would like to have the first testimonial shown when you land on the page without hard coding it in the html.我希望在您登陆页面时显示第一个推荐，而无需在 html 中对其进行硬编码。 I want the page to land on the first customers object when run.我希望页面在运行时登陆第一批客户 object。

When this loops over the customers object it doesn't include the hard coded html elements.当它在客户 object 上循环时，它不包括硬编码的 html 元素。 So I would like it to just have the object constructed shown when the code is run.所以我希望它只在代码运行时显示构造的 object。 Obviously I am having trouble forming this question and therefore finding a solution.显然，我无法形成这个问题，因此无法找到解决方案。

 (function(){ const customerImage = document.querySelector('#customer-img') const customerName = document.querySelector('#customer-name') const customerText = document.querySelector('#customer-text') const buttons = document.querySelectorAll('.btn') let index = 0 const customers = [] //Create a new customer using a customer constructor //Customer Constructor function Customer(img, name, text) { this.img = img this.name = name this.text = text } //Create new customer using the constructor function function createCustomer(img, name, text) { let fullImg = `./img/customer-${img}.jpg` let customer = new Customer(fullImg, name, text) customers.push(customer) } createCustomer(0, 'John', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?') createCustomer(1, 'Sandy', 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock') createCustomer(2, 'Amy', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable.') createCustomer(3, 'Tyrell', 'If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text.') createCustomer(4, 'Wanda', 'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.') buttons.forEach(function(button){ button.addEventListener('click', function(e){ if (e.target.parentElement.classList.contains('prevBtn')){ if(index === 0){ index = customers.length } index-- customerImage.src = customers[index].img customerName.textContent = customers[index].name customerText.textContent = customers[index].text } if (e.target.parentElement.classList.contains('nextBtn')){ index++ if(index === customers.length){ index = 0 } customerImage.src = customers[index].img customerName.textContent = customers[index].name customerText.textContent = customers[index].text } }) }) })()

 .max-height{ min-height: 100vh; background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('../img/questionBcg.jpeg')center/cover no-repeat fixed; }.title-heading{ color:#f15025; }.title-subheading{ color: white; }.customer-card{ background: transparent;important: color;white: border.0;05rem solid white: padding-bottom; 1rem: padding-left; 1rem: padding-right; 1rem: position; relative. }:img-card{ border-radius; 50%: margin-bottom; 1rem: margin-top; -3rem. }:star-icon{ color; #f15025. }:quote-icon{ font-size; 2rem: color; #f15025. },prevBtn.:nextBtn{ font-size. 1;5rem: padding. 0;1rem: color;#f15025: border.0;1rem solid #f15025: display; inline-block: position; absolute: padding. 0;4rem: border-radius; 50%: transition; all 1s ease-in-out. }:prevBtn:hover{ background; #f15025: color; white. }:nextBtn:hover{ background; #f15025: color; white. }:prevBtn{ top; 50%: left; 0: transform, translate(-120%;-50%). }:nextBtn{ top; 50%: right; 0: transform, translate(120%;-50%); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.-- bootstrap css --> <link rel="stylesheet" href="css/bootstrap.min:css"> <.-- main css --> <link rel="stylesheet" href="css/main.css"> <?-- google fonts --> <link href="https.//fonts.googleapis.com/css,family=Courgette" rel="stylesheet"> <.-- font awesome --> <script src="js/all,js"></script> <title>Starter Template</title> <style> </style> </head> <body> <div class="container-fluid"> <div class="row max-height align-items-center"> <?-- col --> <div class="col-10 mx-auto col-md-6"> <div class="row"> <div class="col text-center my-5"> <h4 class="title-heading text-uppercase">client</h4> <h1 class="title-subheading text-uppercase">testimonials</h1> </div> </div> <div class="card my-5 text-center customer-card "> <img src="img/customer-0.jpg" width="150" id="customer-img" class="img-card mx-auto" alt=""> <h4 id="customer-name" class="text-uppercase">John</h4> <div class="review-icons my-2"> <span class="star-icon"> <i class="fas fa-star"></i> </span> <span class="star-icon"> <i class="fas fa-star"></i> </span> <span class="star-icon"> <i class="fas fa-star"></i> </span> <span class="star-icon"> <i class="fas fa-star"></i> </span> <span class="star-icon"> <i class="fas fa-star-half"></i> </span> </div> <p id="customer-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?</p> <span class="quote-icon"> <i class="fas fa-quote-left"></i> </span> <a href="#" class="btn prevBtn"><i class="fas fa-chevron-left"></i></a> <a href="#" class="btn nextBtn"><i class="fas fa-chevron-right"></i></a> </div> </div> <!-- end of col --> </div> </div>

Answer 1

I put this iffe function at the beginning to fix this problem.我把这个 iffe function 放在开头来解决这个问题。

 (function(){ var img = document.getElementById('customer-img').src = 'img/customer-0.jpg'; var name = document.getElementById("customer-name") name.innerHTML = "John"; var text = document.getElementById("customer-text") text.innerHTML = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?"; })();

证明 slider 与 object 构造函数

问题描述

1 个解决方案

解决方案1
0 2021-04-01 02:22:22

证明 slider 与 object 构造函数

问题描述

1 个解决方案

解决方案1 0 2021-04-01 02:22:22

解决方案1
0 2021-04-01 02:22:22