Question

我做了一个旋转木马，现在我需要把它移到另一边（而不是向左移动应该向右移动）。是一个基于列表的非常简单的代码。检查此网站以了解我的想法：http://diningconcepts.com/ 你可以看到如果你按下旋转木马的箭头开始移动到另一边的方式：）

嗯我没有添加箭头但是我的问题是你是否可以让旋转木马从左向右移动（与当前旋转相反）

提前致谢

这是我的代码

$(function() {
  var list = $('ul');
  var perro = $('.perro');
  
  function onAnimate() {		
    $('ul li:first-child').appendTo('ul');
    $('ul li:last-child').css('margin-Left', 0);
		    
    move();
  }
  
  function move() {
    $('ul li:first-child')
        .animate({ marginLeft: -124  }, 1500, onAnimate);
  }
  
  list.find('li:even').addClass('even');
  list.find('li:odd').addClass('odd');
  
  list.on('mouseenter', 'li', function() {
    $('ul li:first-child').stop();
  });
  
  list.on('mouseleave', move);
  
  move();
});

div { width:1080px;overflow:hidden; }
ul { list-style-type:none;width:10000px;margin:0;padding:0; }
li { height:400px;width:108px;float:left;text-align:center;margin:0;padding:0; }
.even {background: #ccc}
.odd {background: #4e4e4e;color:#fff;}

#tomas {
	width: 600px;
	height: 200px;
	background-color: #000;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<link href="carutomstyle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="carujava.js"></script>
</head>

<body>
<div id="new-carousel">
    <ul>
        <li class="perro">Item #1</li>
        <li class="perro">Item #2</li>
        <li class="perro">Item #3</li>
        <li class="perro">Item #4</li>
        <li class="perro">Item #5</li>
        <li class="perro">Item #6</li>
        <li class="perro">Item #7</li>
        <li class="perro">Item #8</li>
        <li class="perro">Item #9</li>
        <li class="perro">Item #10</li>
        <li class="perro">Item #11</li>
        <li class="perro">Item #12</li>
    </ul>
</div>


</body>
</html>

关于应该如何成为新功能的任何想法？

Answer 1

您可以执行以下操作：代替left to right将其更改为right to left，将动画-124更改为+124

例如

$(function() {
  var list = $('ul');
  var perro = $('.perro');
  
  function onAnimate() {		
    $('ul li:first-child').appendTo('ul');
    $('ul li:last-child').css('margin-Right', 0);
		    
    move();
  }
  
  function move() {
    $('ul li:first-child')
        .animate({ marginRight: 124  }, 1500, onAnimate);
  }
  
  list.find('li:even').addClass('even');
  list.find('li:odd').addClass('odd');
  
  list.on('mouseenter', 'li', function() {
    $('ul li:first-child').stop();
  });
  
  list.on('mouseleave', move);
  
  move();
});

div#new-carousel { width:1080px;overflow:hidden; }
ul { list-style-type:none;width:10000px;margin:0;padding:0; }
li { height:400px;width:108px;float:left;text-align:center;margin:0;padding:0; }
.even {background: #ccc}
.odd {background: #4e4e4e;color:#fff;}

#tomas {
	width: 600px;
	height: 200px;
	background-color: #000;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<link href="carutomstyle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="carujava.js"></script>
</head>

<body>
<div id="new-carousel">
    <ul>
        <li class="perro">Item #1</li>
        <li class="perro">Item #2</li>
        <li class="perro">Item #3</li>
        <li class="perro">Item #4</li>
        <li class="perro">Item #5</li>
        <li class="perro">Item #6</li>
        <li class="perro">Item #7</li>
        <li class="perro">Item #8</li>
        <li class="perro">Item #9</li>
        <li class="perro">Item #10</li>
        <li class="perro">Item #11</li>
        <li class="perro">Item #12</li>
    </ul>
</div>


</body>
</html>

Answer 2

你需要改变＆＃39; ul＆＃39;风格边际

ul { 
    margin-left:-108px;
}

更改脚本功能

$(function() {
     var list = $('ul');
     var perro = $('.perro');

     function onAnimate() {     
          $('ul li:first-child').css('margin-Left', 0);
          $('ul li:last-child').prependTo('ul');

          move();
      }

      function move() {
           $('ul li:first-child')
           .animate({ marginLeft: 108  }, 1500, onAnimate);
      }

      list.find('li:even').addClass('even');
      list.find('li:odd').addClass('odd');

      list.on('mouseenter', 'li', function() {
          $('ul li:first-child').stop();
      });

      list.on('mouseleave', move);

      move();
 });

把我的旋转木马移到另一边

2 个答案: