Carousel: как предотвращать выбор изображения и создавать автоматический moviento левой стороны и правой стороны и применять горизонтальный scroll?

В Стакковерфлов Энконтре ты изменяешь вопросы на carousel между другими темами основываясь в мой вопрос.

Ты спрашиваешь очень полезно как гид:

Сейчас мой вопрос:

Как создавать автоматическое движение левой стороны и правой стороны?

Я объясняю себе, что способствовать тому, чтобы движение изображений двинулось, делало левую сторону принимая во внимание inició игры в этом случае, было бы изображения 1 до изображения 6 и отступать / возвращать движение к правой стороне изображения 6 в главное такое изображение последовательно.

Как создавать горизонтальный scroll в изображениях или контенте изображений?

А именно мочь двигать изображения или контент в правую сторону так, как левая сторона с этим эффектом, попробовав выбирать изображение, единственное, что будет возможно получать, состоит в том, чтобы двигать контент carousel.

  • Пример: эффекты этого carousel клиентов, что является в конце страницы этого Цифрового веб сайта Средней.

В carousel свидетельства клиентов, как делание автоматического движения в свидетельствах клиентов.


Они могли бы объяснять мне, как им удалось бы применить эти эффекты.

$(function(){
  // vars for testimonials carousel
  var $txtcarousel = $('#testimonial-list');
  var txtcount = $txtcarousel.children().length;
  var wrapwidth = (txtcount * 415) + 415; // 400px width for each testimonial item
  $txtcarousel.css('width',wrapwidth);
  var animtime = 750; // milliseconds for clients carousel
 
  // prev & next btns for testimonials
  $('#prv-testimonial').on('click', function(){
var $last = $('#testimonial-list li:last');
$last.remove().css({ 'margin-left': '-415px' });
$('#testimonial-list li:first').before($last);
$last.animate({ 'margin-left': '0px' }, animtime); 
  });
  
  $('#nxt-testimonial').on('click', function(){
var $first = $('#testimonial-list li:first');
$first.animate({ 'margin-left': '-415px' }, animtime, function() {
  $first.remove().css({ 'margin-left': '0px' });
  $('#testimonial-list li:last').after($first);
});  
  });


  // vars for clients list carousel
 
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 140); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);
  
  var rotating = true;
  var clientspeed = 1800;
  var seeclients = setInterval(rotateClients, clientspeed);
  
  $(document).on({
mouseenter: function(){
  rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
  rotating = true;
}
  }, '#clients');
  
  function rotateClients() {
if(rotating != false) {
  var $first = $('#clients-list li:first');
  $first.animate({ 'margin-left': '-140px' }, 600, function() {
    $first.remove().css({ 'margin-left': '0px' });
    $('#clients-list li:last').after($first);
  });
}
  }
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}


/** testimonials **/
#testimonials {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
#testimonials h2 {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}

#testimonials .carousel-wrap {
  display: block;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#testimonials .carousel-nav {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#testimonials .carousel-nav img {
  cursor: pointer;
}
#testimonials .carousel-nav img:active {
  position: relative;
  top: 1px;
}
#testimonials .carousel-nav .nextbtn {
  float: right;
}

#testimonials .carousel-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#testimonials .carousel-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 400px;
  margin-right: 15px;
}

#testimonials .carousel-wrap .context {
  font-size: 2.0em;
  line-height: 1.45em;
  color: #797670;
  font-style: italic;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcdc;
}


/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65); 
  opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); 
  opacity: 1.0;
}


  

Client Testimonials

Past & Present Clients

  • Cartoon Network
  • Rough Draft Studios
  • SpongeBob Movie #2
  • Apple Computers
  • Google chat talk
  • G4TV channel
  • Wonka Chocolates and Candy
24
задан 23.05.2017, 15:39
3 ответа

Мы сделаем это по частям.

Сначала карусель свидетельств. То, что ты хочешь, состоит в том, чтобы он оживился автоматически без необходимости того, чтобы пользователь нажал на кнопки. Ты можешь реализовывать это очень простым способом: поскольку уже у тебя есть действие "предыдущей" и "следующей" кнопки, что ты можешь делать, состоит в том, чтобы создавать интервал, который кликал бы в следующей кнопке каждое X время.

Это может делаться с setInterval (чтобы создавать интервал) и метод click (без параметров), чтобы бросать событие click элемента. И оно было бы чем-то как это:

setInterval("$('#nxt-testimonial').click()", 2500);

Что бросает событие click следующей кнопки каждые 2.5 секунды. Сейчас, если ты хочешь сделать это немного более сложным, ты мог бы способствовать тому, чтобы он не был автоматическим, если человек помещает мышь на свидетельствах. Для этого код был бы чем-то как это:

var testinterval = setInterval("$('#nxt-testimonial').click()", 2500);
$txtcarousel.on("mouseenter", function() {
    clearInterval(testinterval);
}).on("mouseleave", function() {
    var testinterval = setInterval("$('#nxt-testimonial').click()", 2500);
});

И здесь ты можешь видеть это функционируя:

$(function(){
  // vars for testimonials carousel
  var $txtcarousel = $('#testimonial-list');
  var txtcount = $txtcarousel.children().length;
  var wrapwidth = (txtcount * 415) + 415; // 400px width for each testimonial item
  $txtcarousel.css('width',wrapwidth);
  var animtime = 750; // milliseconds for clients carousel

  // prev & next btns for testimonials
  $('#prv-testimonial').on('click', function(){
    var $last = $('#testimonial-list li:last');
    $last.remove().css({ 'margin-left': '-415px' });
    $('#testimonial-list li:first').before($last);
    $last.animate({ 'margin-left': '0px' }, animtime); 
  });

  $('#nxt-testimonial').on('click', function(){
    var $first = $('#testimonial-list li:first');
    $first.animate({ 'margin-left': '-415px' }, animtime, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#testimonial-list li:last').after($first);
    });  
  });

  var testinterval = setInterval("$('#nxt-testimonial').click()", 2500);
  $txtcarousel.on("mouseenter", function() {
    clearInterval(testinterval);
  }).on("mouseleave", function() {
    var testinterval = setInterval("$('#nxt-testimonial').click()", 2500);
  });

});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}


/** testimonials **/
#testimonials {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
#testimonials h2 {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}

#testimonials .carousel-wrap {
  display: block;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#testimonials .carousel-nav {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#testimonials .carousel-nav img {
  cursor: pointer;
}
#testimonials .carousel-nav img:active {
  position: relative;
  top: 1px;
}
#testimonials .carousel-nav .nextbtn {
  float: right;
}

#testimonials .carousel-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#testimonials .carousel-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 400px;
  margin-right: 15px;
}

#testimonials .carousel-wrap .context {
  font-size: 2.0em;
  line-height: 1.45em;
  color: #797670;
  font-style: italic;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">

    <div id="testimonials">
      <h2>Client Testimonials</h2>
      <div class="carousel-nav clearfix">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Left-icon.png" id="prv-testimonial" class="prevbtn">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Right-icon.png" id="nxt-testimonial" class="nextbtn">
      </div>
      <div class="carousel-wrap">
        <ul id="testimonial-list" class="clearfix">
          <li>
            <p class="context">"Their services are beyond anything I could have imagined. It gets my highest recommendation."</p>
            <p class="credits">Johnny Appleseed, <a href="http://www.apple.com/">Apple, Inc.</a></p>
          </li>
          <li>
            <p class="context">"Simple. Efficient. Quick production and easy to work with."</p>
            <p class="credits">Smithy Smith, <a href="http://www.roughdraftstudios.com/">Rough Draft Studios, Inc.</a></p>
          </li>
          <li>
            <p class="context">"The marketing strategy is superb. These guys came through above and beyond expectations."</p>
            <p class="credits">Mr. Generic, <a href="http://www.google.com/">Google</a></p>
          </li>
          <li>
            <p class="context">"We needed a reliable team to help with some finishing touches. These guys are reliable, fair, and trustworthy... A+ quality."</p>
            <p class="credits">Seth MacFarlane, <a href="http://en.wikipedia.org/wiki/Fuzzy_Door_Productions">Fuzzy Door Productions</a></p>
          </li>
        </ul><!-- @end #testimonial-list -->
      </div><!-- @end .carousel-wrap -->
    </div><!-- @end #testimonials -->
  </div><!-- @end #content -->
</div><!-- @end #w --> 

Как предлагает Митсу Гами в Вашем комментарии, ты мог бы использовать requestAnimationFrame вместо setInterval. Что функционировало бы лучше, хотя ты должен быть осторожен, потому что оно может не функционировать в каких-то браузерах, особенно не было бы совместимым со старыми версиями Android или IE (9 и нижние).

В этом случае, код оказался бы таким:

var start = null;
var testinterval = null;

function animTestimonials(timestamp) {
  if (!start)  start = timestamp;
  var progress = timestamp - start;
  if (progress > 2500) {
    start = timestamp;
    $('#nxt-testimonial').click();
  }
  testinterval = window.requestAnimationFrame(animTestimonials);
}

$(function(){
  // vars for testimonials carousel
  var $txtcarousel = $('#testimonial-list');
  var txtcount = $txtcarousel.children().length;
  var wrapwidth = (txtcount * 415) + 415; // 400px width for each testimonial item
  $txtcarousel.css('width',wrapwidth);
  var animtime = 750; // milliseconds for clients carousel

  // prev & next btns for testimonials
  $('#prv-testimonial').on('click', function(){
    var $last = $('#testimonial-list li:last');
    $last.remove().css({ 'margin-left': '-415px' });
    $('#testimonial-list li:first').before($last);
    $last.animate({ 'margin-left': '0px' }, animtime); 
  });

  $('#nxt-testimonial').on('click', function(){
    var $first = $('#testimonial-list li:first');
    $first.animate({ 'margin-left': '-415px' }, animtime, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#testimonial-list li:last').after($first);
    });  
  });

  testinterval = window.requestAnimationFrame(animTestimonials);
  $txtcarousel.on("mouseenter", function() {
    window.cancelAnimationFrame(testinterval);
  }).on("mouseleave", function() {
    testinterval = window.requestAnimationFrame(animTestimonials);
  });

});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}


/** testimonials **/
#testimonials {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
#testimonials h2 {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}

#testimonials .carousel-wrap {
  display: block;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#testimonials .carousel-nav {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#testimonials .carousel-nav img {
  cursor: pointer;
}
#testimonials .carousel-nav img:active {
  position: relative;
  top: 1px;
}
#testimonials .carousel-nav .nextbtn {
  float: right;
}

#testimonials .carousel-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#testimonials .carousel-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 400px;
  margin-right: 15px;
}

#testimonials .carousel-wrap .context {
  font-size: 2.0em;
  line-height: 1.45em;
  color: #797670;
  font-style: italic;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">

    <div id="testimonials">
      <h2>Client Testimonials</h2>
      <div class="carousel-nav clearfix">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Left-icon.png" id="prv-testimonial" class="prevbtn">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Right-icon.png" id="nxt-testimonial" class="nextbtn">
      </div>
      <div class="carousel-wrap">
        <ul id="testimonial-list" class="clearfix">
          <li>
            <p class="context">"Their services are beyond anything I could have imagined. It gets my highest recommendation."</p>
            <p class="credits">Johnny Appleseed, <a href="http://www.apple.com/">Apple, Inc.</a></p>
          </li>
          <li>
            <p class="context">"Simple. Efficient. Quick production and easy to work with."</p>
            <p class="credits">Smithy Smith, <a href="http://www.roughdraftstudios.com/">Rough Draft Studios, Inc.</a></p>
          </li>
          <li>
            <p class="context">"The marketing strategy is superb. These guys came through above and beyond expectations."</p>
            <p class="credits">Mr. Generic, <a href="http://www.google.com/">Google</a></p>
          </li>
          <li>
            <p class="context">"We needed a reliable team to help with some finishing touches. These guys are reliable, fair, and trustworthy... A+ quality."</p>
            <p class="credits">Seth MacFarlane, <a href="http://en.wikipedia.org/wiki/Fuzzy_Door_Productions">Fuzzy Door Productions</a></p>
          </li>
        </ul><!-- @end #testimonial-list -->
      </div><!-- @end .carousel-wrap -->
    </div><!-- @end #testimonials -->
  </div><!-- @end #content -->
</div><!-- @end #w -->

Сейчас scroll изображений. Как ты считаешь сделанным прямо сейчас то, что он делает твоим scroll изображений, он делает есть:

  1. Двигать первый элемент к левой стороне помещая ему отрицательный край
  2. Удалять первый элемент
  3. Добавлять это в конце списка
  4. Отпускать в шаг 1 X секунд спустя

Это функционирует хорошо, если ты хочешь сделать движение правой стороны в левую сторону, но чтобы делать что-то сходным с левой стороны до правой стороны, то, что ты мог бы делать:

  1. Двигать последний элемент сначала и помещать ему отрицательный край (без оживления)
  2. Оживлять край первого элемента (раньше последний) для того, чтобы его было 0
  3. Отпускать в шаг 1 X секунд спустя

Я основываюсь на коде, который уже у тебя есть. Если ты обратишь внимание на странице, которую ты соединяешь в вопросе, ты увидишь, что делают это достаточно различным способом (они удваивают контент и это двигают с CSS и translate), что может быть более чистой и интересной.

Для этого только надо менять функцию rotateClients что это осталось бы так:

function rotateClients() {
    if(rotating != false) {
        var $last   = $('#clients-list li:last');
        $last.remove().css("margin-left", "-140px");
        $("#clients-list").prepend($last);
        $last.animate({ 'margin-left': '0' }, 600);
    }
}

Здесь ты можешь видеть код функционируя:

$(function(){

  // vars for clients list carousel 
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 140); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);

  var rotating = true;
  var clientspeed = 1800;
  var seeclients = setInterval(rotateClients, clientspeed);

  $(document).on({
    mouseenter: function(){
      rotating = false; // turn off rotation when hovering
    },
    mouseleave: function(){
      rotating = true;
    }
  }, '#clients');

  function rotateClients() {
    if(rotating != false) {
      var $last   = $('#clients-list li:last');
      $last.remove().css("margin-left", "-140px");
      $("#clients-list").prepend($last);
      $last.animate({ 'margin-left': '0' }, 600);
    }
  }
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65); 
  opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); 
  opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">
    <div id="clients">
      <h3>Past &amp; Present Clients</h3>
      <div class="clients-wrap">
        <ul id="clients-list" class="clearfix">
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"></li>
        </ul>
      </div><!-- @end .clients-wrap -->
    </div><!-- @end #clients -->
  </div><!-- @end #content -->
</div><!-- @end #w -->

Сейчас, когда уже у тебя есть код, чтобы двигать изображения к правой стороне и к левой стороне, что ты мог бы делать:

  1. Считать число элементов
  2. Инициализировать переменную в 0
  3. Реализовывать функцию, которая двигает элементы к левой стороне
  4. Увеличивать в 1 переменную, наставленную в шаге 2
  5. Если переменная - это меньше, чем число элементов (еще не пробежались все изображения), идти в шаг 3
  6. Реализовывать функцию, которая двигает элементы к правой стороне
  7. Уменьшать на 1 переменную, наставленную в шаге 2
  8. Если переменная - это больше, чем 0 (еще не пробежались все изображения), идти в шаг 6
  9. Идти в шаг 3 (чтобы начинать все снова)

Код мог бы быть нечто похожим:

var direccion  = "up";
var pasoActual = 0;

$(function(){

  // vars for clients list carousel 
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 140); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);

  var rotating = true;
  var clientspeed = 1800;
  var seeclients = setInterval(rotateClients, clientspeed);

  $(document).on({
    mouseenter: function(){
      rotating = false; // turn off rotation when hovering
    },
    mouseleave: function(){
      rotating = true;
    }
  }, '#clients');

  function rotateClients() {
    if(rotating != false) {
      if (direccion == "up") {
        rotateClientsUp();
        if (++pasoActual == $("#clients-list li").length) direccion = "down";
      } else {
        rotateClientsDown();
        if (--pasoActual == 0)  direccion = "up";
      }

    }
  }

  function rotateClientsUp() {
    var $last   = $('#clients-list li:last');
    $last.remove().css("margin-left", "-140px");
    $("#clients-list").prepend($last);
    $last.animate({ 'margin-left': '0' }, 600);
  }

  function rotateClientsDown() {
    var $first = $('#clients-list li:first');
    $first.animate({ 'margin-left': '-140px' }, 600, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#clients-list li:last').after($first);
    });
  }
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65); 
  opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); 
  opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">
    <div id="clients">
      <h3>Past &amp; Present Clients</h3>
      <div class="clients-wrap">
        <ul id="clients-list" class="clearfix">
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"></li>
        </ul>
      </div><!-- @end .clients-wrap -->
    </div><!-- @end #clients -->
  </div><!-- @end #content -->
</div><!-- @end #w -->

На этом тащения элементов в scroll, метод соединенной страницы намного лучше. Я создал простое оживление, которое основывается на положении мыши, когда он нажимается и освобождается имея в виду, что ширины каждого элемента 140.

Ты можешь видеть это здесь:

var direccion  = "up";
var pasoActual = 0;
var scrollUsuario = false;
var scroll0 = -1;

$(function(){

  // vars for clients list carousel 
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 140); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);

  var rotating = true;
  var clientspeed = 1800;
  var seeclients = setInterval(rotateClients, clientspeed);

  $(document).on({
    mouseenter: function(){
      rotating = false; // turn off rotation when hovering
    },
    mouseleave: function(){
      rotating = true;
    }
  }, '#clients');

  function rotateClients() {
    if(rotating != false) {
      if (direccion == "up") {
        rotateClientsUp();
        if (++pasoActual == $("#clients-list li").length) direccion = "down";
      } else {
        rotateClientsDown();
        if (--pasoActual == 0)  direccion = "up";
      }

    }
  }

  function rotateClientsUp() {
    var $last   = $('#clients-list li:last');
    $last.remove().css("margin-left", "-140px");
    $("#clients-list").prepend($last);
    $last.animate({ 'margin-left': '0' }, 600);
  }

  function rotateClientsDown() {
    var $first = $('#clients-list li:first');
    $first.animate({ 'margin-left': '-140px' }, 600, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#clients-list li:last').after($first);
    });
  }
  
  $clientcarousel.on("mousedown", function(e) {
    scrollUsuario = true;
    scroll0 = e.pageX;
    event.preventDefault();
  }).on("mouseup", function(e) {
    scrollUsuario = false;
    var num = Math.floor(Math.abs(scroll0 - e.pageX) / 140);
    var dir = scroll0 - e.pageX < 0 ? "up" : "down";
    for (var x = 0; x < num; x++) {
    	var $first = $('#clients-list li:first');
    	var $last  = $('#clients-list li:last');
      if (dir == "up") {
      	$last.prependTo("#clients-list");
      } else {
      	$first.appendTo("#clients-list");
      }
    }
    $("#clients-list").css("transform", "translate(0, 0)")
  }).on("mousemove", function(e) {
  	if (scrollUsuario) {
      $("#clients-list").css("transform", "translate(" + ( e.pageX - scroll0 ) +"px, 0)")
    }
  });
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65); 
  opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); 
  opacity: 1.0;
}


#clients, #clients * {
  user-select:none;
  -webkit-user-select:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">
    <div id="clients">
      <h3>Past &amp; Present Clients</h3>
      <div class="clients-wrap">
        <ul id="clients-list" class="clearfix">
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"></li>
        </ul>
      </div><!-- @end .clients-wrap -->
    </div><!-- @end #clients -->
  </div><!-- @end #content -->
</div><!-- @end #w -->
13
ответ дан 24.11.2019, 13:16
  • 1
    Лучший opci и # 243; n он состоит в том, чтобы использовать requestAnimationFrame вместо setInterval. – gugadev 03.10.2016, 16:59
  • 2
    @May в и # 241; ad и # 237; пример, который сначала двигает элементы в правую сторону, и когда он заканчивается, перейди к тому, чтобы двигать их в правую сторону и схвати и # 237; последовательно. B и # 225; sicamente это и #250; nico, что habr и # 237; которому делать значит помещать вместе c и # 243; я говорю оригинал и предложенного – Alvaro Montoro♦ 03.10.2016, 22:51

Чтобы видеть, я отрезаю... доставая только из этого, что я поместил тебе раньше код карусели с текстом и изображением:

Это html и javascript

<!doctype html><html>  <head><meta charset="utf-8"><title>CITAS</title> 
<link rel="stylesheet" type="text/css" href="css/citas_slide.css" />

<script type="text/javascript" src="javascript/jquery-2.1.4.min.js" ></script>
<script type="text/javascript" src="javascript/galeria.js" ></script>
<script>
var t;

$(function (){
  galeria.forEach(function(elem,i) { 
    $("ul#selector").append("<li><a onClick='select("+i+")'></a></li>");
  });

  select(0);
});

function select(i){
  $("nav a")
    .removeClass("on off")
    .addClass(function(j){return(j===i)?"on":"off";});

  $("#persona").html(galeria[i].persona);
  $("#frase").html(galeria[i].frase);
  $("#foto").attr("src", galeria[i].foto);

  clearTimeout(t);
  t = setTimeout( function(){select((i + 1) % galeria.length);}, 2000);
}
</script>
</head>

<body>
<div class="contenido">
  <nav> 
    <ul id="selector"></ul>
  </nav>
  <section id="caja">
    <img id="foto" alt="" />
    <div class="textos">
      <p id="frase"></p>
      <p id="persona"></p>
    </div>
  </section>
</div>
</body>
</html>

и в этом документе javascript он, где ты загружаешь текст и url изображения, которое ты будешь показывать, в твоем случае он был бы логотипом (я верю)

var galeria = [
   { persona:"Buddha - बुद्धा",
     frase:"En la confrontación entre el arrollo y la roca, el arrollo siempre ganará, no por la fuerza, sino por la persistencia.",
     foto:"http://www.imagexia.com/img/Cara-de-Buda.jpg"
   },
   { persona:"Khalil Gibran - جبران خليل جبران بن ميخائل بن سعد",
     frase:"El silencio del envidioso está lleno de ruidos.",
     foto:"http://www.hannaharendtcenter.org/wp-content/uploads/2015/05/111.jpg"
   }
];

Этот раз только я поместил тебе две фразы для того, чтобы ты увидел, как загружается array, который потом ты прочитаешь с javascript. Если ты не хочешь, чтобы появилась фотография, или какой-либо из двух текстов только ты должен удалять, где поместил человек, фраза или фотография зависит от того, что ты не хочешь, чтобы он появился, если ты нуждаешься в css, скажи мне это и я помещаю это тебе также, хотя я думаю, что то, что ты хочешь сделать, ты будешь должен создавать себя твой собственный

приветствие

4
ответ дан 24.11.2019, 13:16
  • 1
    Привет друг;) Спасибо за пример, но он мне кажется очень пространным: (пример моего вопроса код короткий обобщенный, в чем я нуждаюсь того c и # 243; я говорю, что он состоит в том, чтобы carousel логотипов был autom и # 225; костариканский обеих сторон а именно, которые двигают в левую сторону, и отступите в правую сторону, которая двигается в обеих сторонах, и у которой есть in эффект движения логотипов как как правая сторона, так и в левую сторону как bot и # 243; n только, что вместо bot и # 243; n после того, как считали нажатым с левым click maus двигать im и # 225; гены с двух сторон. – May 03.10.2016, 14:49
  • 2
    И свидетельство клиентов, что autom и # 225; костариканский, то свидетельство изменяет свидетельство из-за стрел, но мне хотелось бы, что он пошел autom и # 225; костариканский tambi и # 233; n. S и # 237; я podr и # 237; схвати помогать с c и # 243; я говорю о моем вопросе быть и # 237; в м и # 225; ximo, потому что это я м и # 225; s f и # 225; cil изучать это - м и # 225; s я отрезаю. Спасибо привет, хороший d и # 237; в:) – May 03.10.2016, 14:50

Это может осуществляться с bootstrap, не необходимо изобретать черный трэд заново.

оставил Тебе пример, помести atenciГіn следующий div.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">

В этом div конфигурируют свойства карусели, даты - interval представь время в миллисекундах, которые он будет медлить с тем, чтобы перемещать другую от одного изображения.

, Если состоит твоего вкуса в том, чтобы реализовывать это с javascript, только ты был бы должен реализовывать следующее:

<script>
    $('.carousel').carousel({
        interval: 3000
    })
</script> 

, Если ты нуждаешься в том, чтобы конфигурировать больше карусель, посети следующее соединение http://getbootstrap.com/javascript/#carousel , где ты можешь наблюдать все свойства, которые ты можешь конфигурировать.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="http://placehold.it/1200x315" alt="...">
              <div class="carousel-caption">
                <h3>Caption Text</h3>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/1200x315" alt="...">
              <div class="carousel-caption">
                <h3>Caption Text</h3>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/1200x315" alt="...">
              <div class="carousel-caption">
                <h3>Caption Text</h3>
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div> <!-- Carousel -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
4
ответ дан 24.11.2019, 13:16