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

Move my carousel to the other side

本文关键字：另一边 旋转木马 我的      更新时间：2023-09-26

我已经制作了一个旋转木马，现在我需要将它移动到另一边(而不是移动到左边应该移动到右边)。是一个基于列表的非常简单的代码。查看这个网站来理解我的想法:http://diningconcepts.com/你可以看到，如果你按下箭头，旋转木马开始移动到另一边:)

我还没有添加箭头，但我的问题是，如果你能让旋转木马从左向右移动(与当前的相反)

Thanks in advance

这里是我的代码

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

你知道新函数应该是怎样的吗?

您可以这样做:将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>

你需要改变style

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();
 });
相关文章：