ギャラリーのスライダーを作成中にjqueryアニメーションが動作しない

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

をクリックして、私はいくつかは、= 1この

のvarリットルのように上記のコード変数で使用イニシエーションていたときにコードです。 var x1 = 18/6;

問題は右矢印をクリックすると右にスクロールすることです。左矢印をクリックすると、左にスクロールします。私は右矢印をクリックしたときには、次の行には、次の

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

が動作していないこと

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

    ... 

、スライダーのための私のhtmlで更新ここでデモが

http://profileone.net/slider.html

Answer 1

です

私はすべてあなたのanimateメソッドプロパティを再定義する必要があると思います。あなたのhtmリットルルックこれらのボタンの両方をクリックした後

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