jQuery-как переместить объект влево и вправо

Я уверен, что это очень простой вопрос, но даже после нескольких часов чтения через Stackoverflow/Google.. все равно не повезло.

Как создать эффект движущегося объекта вроде этой карусели в конце сайта.

цифровой носитель

Эффект руки при щелчке левой кнопкой мыши и перемещении объекта по обе стороны.

/** 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;
}
<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 -->

2 ответа

  1. просто используйте этот плагин jquery благодаря owl carousel 2

    HTML

    <div id="owl-example" class="owl-carousel">
    
    <div>
    <img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png">
    </div>
    
    <div>
    <img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png">
    </div>
    
    <div>
    <img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png">
    </div>
    
    <div>
    <img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png">
    </div>
    
    <div>
    <img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png">
    </div>
    
    <div>
    <img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png">
    </div>
    
    </div>
    

    JQUERY

    $(function(){
    owl();
    })
    
    
    function owl(){
    
    $('#owl-example').owlCarousel({
        loop:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    })
    
    }
    

    ДЕМОНСТРАЦИЯ

  2. .animate()Для перемещения объекта можно использовать jquery. Пожалуйста, посмотрите здесь

    Или вы можете установить смещение элемента, чтобы переместить его влево или вправо при перетаскивании мыши.

    $element.offset({left: e.pageX - w/2});
    

    Простой ответ можно найти здесь, надеюсь, что он может решить более сложный, если у вас есть.