使用 jQuery 创建一个简单的无限轮播
Posted
技术标签:
【中文标题】使用 jQuery 创建一个简单的无限轮播【英文标题】：Create a simple infinite carousel using jQuery 【发布时间】：2018-04-21 22:42:54 【问题描述】：这就是我想要做的。 我正在尝试从头开始创建一个简单的响应式轮播，到目前为止，我唯一遇到的问题是检测轮播中的最后一项并重新开始，因此它看起来是无限的。最好的方法是什么？
我也在尝试在移动设备上实现这一点，您可以在轮播上拖动以查看更多项目，这部分没什么大不了的，但我遇到了与桌面版本相同的问题，我只是想找到一种方法让它变得无限。
JsFidle
html：
<div class="container">
<div class="nav-products-carousel">
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">1</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">2</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">3</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">4</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">5</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">6</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">8</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">9</p>
</a>
</div>
<span class="scroll-right text-white">
<i class="fa fa-angle-right fa-3x"></i>
</span>
</div>
</div>
CSS：
div.nav-products-carousel
width: 100%;
white-space: nowrap;
overflow-x: hidden;
background: rgb(201, 201, 116);
div.nav-item
display: inline-block;
width: 200px;
white-space: initial;
text-align: center;
padding: 5px;
.scroll-right
right: 0px;
cursor: pointer;
position: absolute;
background: #ccc;
padding-top: 5%;
height: 100%;
width: 100px;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
查询：
var scrolled = 0;
$(document).on('click', '.scroll-right', function()
scrolled = scrolled + 250;
$('.nav-products-carousel').stop().animate(
scrollLeft: scrolled
);
);
【问题讨论】：
请正确设置 JsFiddle。它缺少 jQuery 和 BootStrap。而且，它根本不起作用。 @AmitKB 很抱歉。我用 bootstrap 和 jquery 1.9 更新了 JsFiddle。现在似乎对我有用jsfiddle.net/17r2v6hs/6 答案已发布。 JsFiddle 需要通过“https”而不是“http”进行外部链接引用。 【参考方案1】：这是JsFiddle中的工作演示
$(document).ready(function()
var scrolled = 0,
scrollDistance = 210, // Scrolling at at time
maxToScroll, // Maximum to scroll left
el; // Target element
// Get target element reference
el = $('.nav-products-carousel');
// calculate maximum to scroll
// this helps to make last element to appear correctly
maxToScroll = el.width() + scrollDistance;
$(document).on('click', function()
if ( scrolled < maxToScroll )
scrolled = scrolled + scrollDistance;
el.stop().animate(
scrollLeft: scrolled
);
else
el.stop().animate(
scrollLeft: 0
);
// Reset scrolled flag
scrolled=0;
);
);div.nav-products-carousel
width: 100%;
white-space: nowrap;
overflow-x: hidden;
background: rgb(201, 201, 116);
div.nav-item
display: inline-block;
width: 200px;
white-space: initial;
text-align: center;
padding: 5px;
.scroll-right
right: 0px;
cursor: pointer;
position: absolute;
background: #ccc;
padding-top: 5%;
height: 100%;
width: 100px;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="container">
<div class="nav-products-carousel">
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">1</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">2</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">3</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">4</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">5</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">6</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">8</p>
</a>
</div>
<div class="nav-item text-center">
<a href="/mattresses/">
<center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>
<p v-html="product.properties.Title">9</p>
</a>
</div>
<span class="scroll-right text-white">
<i class="fa fa-angle-right fa-3x"></i>
</span>
</div>
</div>【讨论】：
上面显示的有滚动问题，但 it works fine 其他问题。以上是关于使用 jQuery 创建一个简单的无限轮播的主要内容，如果未能解决你的问题，请参考以下文章