时间戳

首页 > 解决方案 > 带有 Jquery 的轮播

javascript - 带有 Jquery 的轮播

问题描述

我正在努力理解如何实现一个简单的轮播。我已经尝试了 append()/prepend() 函数，但似乎无法让它按照我想要的方式运行。

我正在使用的设置：

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <title>First Step Connections - Online Media Marketing</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;900&display=swap" rel="stylesheet">
</head>


<body>


<div id="testimonial-carousel-container">
  <div id="btn-prev"> < </div>


<div id="testimonial-carousel">


 <div id="testimonial-container">
 <div id="testimonial">
  <div class="speech-bubble">
    <div class="arrow bottom right"></div>
    How was lunch today? 
  </div>
  <img src="../Customer_Testimonial1.jpg"/>
  <span class="author">
 Justin Harris<br/>
 Houston, TX
</span>
 </div>

 <div id="testimonial">
  <div class="speech-bubble">
    <div class="arrow bottom right"></div>
    Football is the best sport! 
  </div>
  <img src="../Customer_Testimonial1.jpg"/>
  <span class="author">
 Justin Harris<br/>
 Houston, TX
</span>
 </div>


 <div id="testimonial">
  <div class="speech-bubble">
    <div class="arrow bottom right"></div>
    Meeting at 12pm. 
  </div>
  <img src="../Customer_Testimonial1.jpg"/>
  <span class="author">
 Justin Harris<br/>
 Houston, TX
</span>
 </div>

 <div id="testimonial">
  <div class="speech-bubble">
    <div class="arrow bottom right"></div>
    The weather outside is gorgeous.
  </div>
  <img src="../Customer_Testimonial1.jpg"/>
 <span class="author">
 Justin Harris<br/>
 Houston, TX
</span>
 </div>

 <div id="testimonial">
  <div class="speech-bubble">
    <div class="arrow bottom right"></div>
    Susan can you call Jim?
  </div>
  <img src="../Customer_Testimonial1.jpg"/>
  <span class="author">
 Justin Harris</br>
 Houston, TX
</span>
</div>

</div>
</div>
<div id="btn-next"> > </div>
</div>
</body>
</html>

基本上我有一个旋转木马容器，在旋转木马容器中我有一个带有 x 数量的推荐 div 的推荐容器。

css 似乎没问题，因为我隐藏了旋转木马容器的溢出，并删除了推荐容器上的空白包装。所以一切看起来都很好。我只需要帮助我了解如何无休止地滚动 x 数量的 div 的逻辑。

因此，当我到达最后一个推荐时，它会流畅地继续到第一个。

这是我的 css 以防你需要它：

:root {
  --main-red-color: #e11a2c;
  --main-blue-color: #013e7b;
  --main-green-color: #8dc63f;

}

* {
  color:var(--main-blue-color);
  box-sizing:border-box;
  font-family:"Lato", sans-serif;
}

#testimonial-carousel-container {
  width:70%;
  margin: auto;
  position:relative;
}

#testimonial-carousel {
  margin: auto;
  background-color:var(--main-blue-color);
  position:relative;
  overflow:hidden;
}

#testimonial-container {
  white-space:nowrap;
  width:100%;
  position:relative;
}

.speech-bubble {
  border-radius:5px;
  background-color:var(--main-green-color);
  width:auto;
  display:inline-block;
  padding:20px;
  text-align:center;
  position:relative;
}

.speech-bubble .arrow {
  border-style: solid;
  position:absolute;
}

.bottom {
  border-color: var(--main-green-color) transparent transparent transparent;
  border-width:8px 8px 0 8px;
  bottom:-8px;
}

#testimonial {
  padding:10px 5px 5px 5px;
  height:200px;
  background-color:var(--main-red-color);
  position:relative;
  display:inline-grid;
  opacity:.4;
}

#testimonial img {
  width:40px;
  height:40px;
  border-radius:50%;
  margin-top:13px;
}

#testimonial span {
  color:#fff;
  font-weight:900;
}

#btn-prev, #btn-next {
  position:absolute;
  background-color:var(--main-red-color);
  color:#fff;
  height:40px;
  width:40px;
  z-index:5;
  border:3px solid #fff;
  text-align:center;
  line-height:40px;
  font-weight:900;
  margin-top:-20px;
}

#btn-prev:hover, #btn-next:hover {
  background-color:var(--main-blue-color);
}

#btn-prev {
  top:50%;
  left:-40px;
}

#btn-next {
  top:50%;
  right:-40px;
}

至于 Jquery 脚本，我正在绘制空白。如果您可以就完成此操作的逻辑提供一些帮助，我将不胜感激。append() prepend() 是唯一的方法吗？

您可以在以下位置查看演示：http: //firststepconnections.com/carousel/

标签： javascripthtmljquerycss

解决方案

推荐阅读