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 for slider，

   <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

我认为一切正常你需要重新定义你的animate方法属性，看看你的html在点击这两个按钮之后的样子

＆＃13;

$(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;
    }
  });

});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: