Question

我基本上将现有的滑块从现有网站转移到新网站，我不想浪费额外的时间来弄清楚如何从头开始创建文本滑块，因为客户端想要在他的新网站上做同样的事情

我找到了代码并对其进行了修改以便在新网站上工作。除了它并没有真正起作用。滑块如下所示：

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包装器从左侧开始（图标所在的位置）与滑入的链接之间的差距逐渐变大。大约一分钟后，差距变得非常大。

那么有办法防止这种情况发生吗？我在这做错了什么？：\

Answer 1

嗨试试这个样本我希望它可以帮到你

<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>

Answer 2

您可以尝试使用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>

每次迭代后，文本滑块会从左侧增加偏移量

2 个答案: