jQuery Animate 在创建图库滑块时不起作用

jquery animate not working while creating gallery slider

本文关键字：不起作用 Animate 创建 jQuery      更新时间：2023-09-26

我正在使用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;
 }

我正在启动上述代码变量中使用的一些代码变量，如下所示

变量 l=1;变量 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

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

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

相关文章：