创建图库滑块时，jquery animate不起作用

Question

我正在使用jquery创建一个滑块图像库。

这是我单击向右箭头时的代码。

 var v=1;
$(".r").click(function(){
aa=1150;
var aa=aa*v;
if(x1>1){
 $(".d1").animate({right: aa.toString()+"px"});
 l=l+1;
 v=v+1;
 x1=x1-1;
 v1=v1-1;
}

这是当我单击向左箭头时的代码

var v1=1;
 $(".l").click(function(){
 var aa=1150;
 aa=aa*v1;

if(l>1)
 { 
   $(".d1").animate({left: aa.toString()+"px"});
   x1=x1+1;
   l=l-1;
   v1=v1+1;
   v=v-1;
 }

我开始在上面的代码变量中使用一些这样的代码

var l = 1; var x1 = 18/6;

问题是当我单击向右箭头时，它会向右滚动。 然后当我单击左箭头时，它会滚动到左侧。 但是当我单击右箭头时，以下行不起作用

       $(".d1").animate({right: aa.toString()+"px"});

以下是我的HTML滑块，

   <div class="d1">
  <ul>
   <li >
   <a href="#">
    <img style="width=100px;height:70px" src="Toyota/1.jpg"/>
     <span style="width:100px;height:100px;font-size:small;">This is a new toyota1<span><br>
     <span style="width:100px;height:100px;font-size:small;">&nbsp$9,000</span>

   </a>
  </li>

  <li >
    <a href="#">
     <img style="width=100px;height:70px" src="Toyota/1.jpg"/>
       <span style="width:100px;height:100px;font-size:x-small;">This is a new toyota2<span>
      </a>
    </li> 

     ...

更新这里是演示

http://profileone.net/slider.html

Answer 1

我认为一切正常，您需要重新定义单击两个按钮后html外观的animate方法属性

 $(document).ready(function(){ var l=1; var x1=18/6; var v=1; var v1=1; $(".r").click(function(){ aa=500; var aa=aa*v; if(x1>1){ $( ".d1" ).animate({ right: aa.toString()+"px", fontSize: "3em", borderWidth: "5px" }, 1500 ); l=l+1; v=v+1; x1=x1-1; v1=v1-1; } }); $(".l").click(function(){ var aa=300; aa=aa*v1; if(l>1) { $( ".d1" ).animate({ left: aa.toString()+"px", fontSize: "3em", borderWidth: "10px" }, 1500 ); x1=x1+1; l=l-1; v1=v1+1; v=v-1; } }); }); 

 .d1{ border:1px solid #DEDEDE; width:300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="d1"> <ul> <li > <a href="#"> <img style="width=100px;height:70px" src="Toyota/1.jpg"/> <span style="width:100px;height:100px;font-size:small;">This is a new toyota1<span><br> <span style="width:100px;height:100px;font-size:small;">&nbsp$9,000</span> </a> </li> <li > <a href="#"> <img style="width=100px;height:70px" src="Toyota/1.jpg"/> <span style="width:100px;height:100px;font-size:x-small;">This is a new toyota2<span> </a> </li> </ul> </div> <div class="l">Left</div> <div class="r">Right</div>