文本滑块在每次迭代后增加从左侧偏移
Text slider increases offset from the left after each iteration
我基本上是将现有滑块从现有站点转移到新站点，我不想浪费额外的时间弄清楚如何从头开始创建文本滑块，因为客户希望在他的新站点上做同样的事情。
我找到了代码并对其进行了一些修改以在新网站上工作。除非它并没有真正正常工作。滑块如下所示：
var counter = 1;
var total_width = 0;
function slider_total_width() {
$('.items a').each(function() {
total_width += parseInt($(this).width(), 10);
});
$('.items').width(total_width);
}
slider_total_width();
function job_slider(wrapper) {
var first_link = $('#active');
var width = first_link.width();
$(wrapper + ' a').each(function() {
total_width += $(this).width() + 50;
});
first_link.removeAttr('id');
$(wrapper).animate({
left: '-=' + width
}, 1000, function() {
$(first_link).clone().appendTo(wrapper);
$(first_link).css('color', 'transparent');
var links = $(wrapper + ' a');
var new_first_link = links[counter];
counter++;
$(new_first_link).attr('id', 'active');
$(wrapper).width(total_width);
total_width = 0;
});
}
var activate = function() {
job_slider('.items');
};
var interval = setInterval(activate, 5000);
$('.items').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(activate, 5000);
});.container {
margin: 0 auto;
width: 700px;
}
a {
text-decoration: none;
}
#ads_scroller .container {
font-size: 0;
position: relative;
}
#ads_scroller .icon_holder {
display: inline-block;
width: 3%;
margin-top: 8px;
}
#ads_scroller .icon_holder i {
font-size: 22px;
color: #fe9700;
}
#ads_scroller .scroller_container {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 97%;
height: 31px;
position: relative;
}
#ads_scroller .scroller_container .items {
position: relative;
display: block;
}
#ads_scroller .scrollable_title {
position: relative;
color: #727272;
font-size: 14px;
font-weight: 400;
line-height: 41px;
display: inline;
white-space: nowrap;
padding: 0 0 0 2px;
box-sizing: border-box;
}
#ads_scroller .scrollable_title:last-of-type {
margin-right: 0;
}
#ads_scroller #active.scrollable_title {
color: #1a171b;
}
#ads_scroller .scrollable_title:hover {
color: #555;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="ads_scroller">
<div class="container">
<div class="icon_holder"><i class="fa fa-bell-o"></i>
</div>
<div class="scroller_container">
<div class="items" style="width: 2642px;">
<a href="#" class="scrollable_title" id="active">Lorem ipsum dolor sit amet – </a>
<a href="#" class="scrollable_title">Consectetur adipisicing elit – </a>
<a href="#" class="scrollable_title">Incidunt tempore explicabo ea autem, eligendi excepturi – </a>
<a href="#" class="scrollable_title">Sapiente sint officiis non minima ex – </a>
<a href="#" class="scrollable_title">Tenetur provident, ipsum dignissimos autem earum nobis dolor – </a>
<a href="#" class="scrollable_title">Obcaecati iste animi cumque culpa – </a>
<a href="#" class="scrollable_title">Vero asperiores illum rerum – </a>
<a href="#" class="scrollable_title">Test to see how announcements look – </a>
</div>
</div>
</div>
</div>现在我想我知道问题是什么，但我不知道如何解决它。出于某种原因，我的.items包装器如果没有设置宽度，就不会将所有链接都放在一行中，所以过了一段时间，我将没有任何链接可以滚动。
奇怪的是，这不是在客户端设置的，我无法弄清楚他们使用什么 css 规则可以允许这样做（无限向左移动而不设置宽度）。因此，为了规避这一点，我正在计算总宽度，然后在每次滑块克隆通过的元素时对其进行设置。
但是这样做（至少这是我的猜测）是，一段时间后，.items包装器从左侧开始（图标所在的位置）与滑入的链接之间的间隙逐渐变大。大约一分钟后，差距变得非常大。
那么有没有办法防止这种情况呢？我在这里做错了什么？:''
嗨，
试试这个样本，希望它对你有所帮助
<html>
<head>
<title>Demo Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" >
<div class="caption">
<a href="#" class="scrollable_title" id="active">Lorem ipsum dolor sit amet – </a>
<a href="#" class="scrollable_title">Consectetur adipisicing elit – </a>
<a href="#" class="scrollable_title">Incidunt tempore explicabo ea autem, eligendi excepturi – </a>
<a href="#" class="scrollable_title">Sapiente sint officiis non minima ex – </a>
<a href="#" class="scrollable_title">Tenetur provident, ipsum dignissimos autem earum nobis dolor – </a>
<a href="#" class="scrollable_title">Obcaecati iste animi cumque culpa – </a>
<a href="#" class="scrollable_title">Vero asperiores illum rerum – </a>
<a href="#" class="scrollable_title">Test to see how announcements look – </a>
</div>
</div>
<div class="item " >
<div class="caption">
<a href="#" class="scrollable_title" id="active">Lorem ipsum dolor sit amet – </a>
<a href="#" class="scrollable_title">Consectetur adipisicing elit – </a>
<a href="#" class="scrollable_title">Incidunt tempore explicabo ea autem, eligendi excepturi – </a>
<a href="#" class="scrollable_title">Sapiente sint officiis non minima ex – </a>
<a href="#" class="scrollable_title">Tenetur provident, ipsum dignissimos autem earum nobis dolor – </a>
<a href="#" class="scrollable_title">Obcaecati iste animi cumque culpa – </a>
<a href="#" class="scrollable_title">Vero asperiores illum rerum – </a>
<a href="#" class="scrollable_title">Test to see how announcements look – </a>
</div>
</div>
<div class="item" >
<div class="caption">
<a href="#" class="scrollable_title" id="active">Lorem ipsum dolor sit amet – </a>
<a href="#" class="scrollable_title">Consectetur adipisicing elit – </a>
<a href="#" class="scrollable_title">Incidunt tempore explicabo ea autem, eligendi excepturi – </a>
<a href="#" class="scrollable_title">Sapiente sint officiis non minima ex – </a>
<a href="#" class="scrollable_title">Tenetur provident, ipsum dignissimos autem earum nobis dolor – </a>
<a href="#" class="scrollable_title">Obcaecati iste animi cumque culpa – </a>
<a href="#" class="scrollable_title">Vero asperiores illum rerum – </a>
<a href="#" class="scrollable_title">Test to see how announcements look – </a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
您可以尝试 outerwidth（） 而不是 width（），因为我认为解决方案是在宽度上添加 +2px，这实际上是每个锚项目的左边填充。
var counter = 1;
var total_width = 0;
function slider_total_width() {
$('.items a').each(function() {
total_width += parseInt($(this).outerWidth(), 10);
});
$('.items').width(total_width);
}
slider_total_width();
function job_slider(wrapper) {
var first_link = $('#active');
var width = first_link.outerWidth();
$(wrapper + ' a').each(function() {
total_width += $(this).width() + 50;
});
first_link.removeAttr('id');
$(wrapper).animate({
left: '-=' + width
}, 1000, function() {
$(first_link).clone().appendTo(wrapper);
$(first_link).css('color', 'transparent');
var links = $(wrapper + ' a');
var new_first_link = links[counter];
counter++;
$(new_first_link).attr('id', 'active');
$(wrapper).width(total_width);
total_width = 0;
});
}
var activate = function() {
job_slider('.items');
};
var interval = setInterval(activate, 5000);
$('.items').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(activate, 5000);
});.container {
margin: 0 auto;
width: 700px;
}
a {
text-decoration: none;
}
#ads_scroller .container {
font-size: 0;
position: relative;
}
#ads_scroller .icon_holder {
display: inline-block;
width: 3%;
margin-top: 8px;
}
#ads_scroller .icon_holder i {
font-size: 22px;
color: #fe9700;
}
#ads_scroller .scroller_container {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 97%;
height: 31px;
position: relative;
}
#ads_scroller .scroller_container .items {
position: relative;
display: block;
}
#ads_scroller .scrollable_title {
position: relative;
color: #727272;
font-size: 14px;
font-weight: 400;
line-height: 41px;
display: inline;
white-space: nowrap;
padding: 0 0 0 2px;
box-sizing: border-box;
}
#ads_scroller .scrollable_title:last-of-type {
margin-right: 0;
}
#ads_scroller #active.scrollable_title {
color: #1a171b;
}
#ads_scroller .scrollable_title:hover {
color: #555;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="ads_scroller">
<div class="container">
<div class="icon_holder"><i class="fa fa-bell-o"></i>
</div>
<div class="scroller_container">
<div class="items" style="width: 2642px;">
<a href="#" class="scrollable_title" id="active">Lorem ipsum dolor sit amet – </a>
<a href="#" class="scrollable_title">Consectetur adipisicing elit – </a>
<a href="#" class="scrollable_title">Incidunt tempore explicabo ea autem, eligendi excepturi – </a>
<a href="#" class="scrollable_title">Sapiente sint officiis non minima ex – </a>
<a href="#" class="scrollable_title">Tenetur provident, ipsum dignissimos autem earum nobis dolor – </a>
<a href="#" class="scrollable_title">Obcaecati iste animi cumque culpa – </a>
<a href="#" class="scrollable_title">Vero asperiores illum rerum – </a>
<a href="#" class="scrollable_title">Test to see how announcements look – </a>
</div>
</div>
</div>
</div>相关文章：
- 如何在javascript中迭代数字列表
- JS:检查URL中的参数，然后迭代一个参数为var的函数
- 如何迭代Array.prototype函数
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 在ejs-partial中对JSON对象进行迭代
- 如何在DataTables 2.1中迭代对象数组
- 使用递归属性迭代保留属性结构
- 正在停止.在jquery中的特定时间间隔内，每次迭代的每次执行
- 如果30秒未单击，请应用CSS一次，将其删除，然后重新迭代
- 主干-从模板中迭代的集合中获取特定的模型
- 创建一个方法，通过一个窗口进行迭代并获取Titanium中的所有控件
- 什么's是在javascript中迭代项的最佳方式
- 为什么这只是迭代 HTMLCollection 的奇怪元素
- 是否“;对于的“;循环迭代遵循JavaScript中的数组顺序
- Babel编译错误:找不到模块核心js/library/fn/get迭代器
- 在es6中，将带有回调的事件侦听器设置为可迭代的
- jQuery-迭代不正确?(太长，无法执行）
- 每个$.，循环获胜't逐个迭代HTML元素
- 文本滑块在每次迭代后增加从左侧偏移
- 如何在Javascript中增加每次迭代的填充
