scrollToを水平に動作させようとしています

Question

jQuery scrollToプラグインを水平に動作させようとしているので、少しjsfiddleをまとめました。

http://jsfiddle.net/P9B5y/15/

次に、ジャバスクリプトなしで、単に各画像（IMG 1、IMG 2、など）を置き換えるが、jQueryのが提起されると、それが発生しません。

ご協力いただければ幸いです！あなたのコメントに基づいて

Answer 1

：

私は水平スクロール に各ID =「イメージ番号」を生きる、と代わる、 はなく、単に置き換えます。そのようです; 私は信じていません

を待っているいくつかに反対するとしてのみ、ある特定の 一度に表示することが 1つのIDを可能にするカットオフ、存在することになる除く jsfiddle.net/P9B5y、 scrollToプラグインはあなたが望むものです。

HTML：：

<div id="viewport"> 
    <ul> 
     <li> 
      <img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" /> 
     </li> 
     <li> 
      <img src="http://media2.teenormous.com/items/www.uneetee.com/product_images-d-775-HiddenAnimals__39659_std.jpg" /> 
     </li> 
     <li> 
      <img src="http://media1.teenormous.com/items/media.80stees.com/images-products-Ladies-Slim-Fit-Animal-Shirt.jpg" /> 
     </li> 
     <li> 
      <img src="http://astorenet.com/wp-content/uploads/2011/04/wpid-67-petrol-rc-car.jpg" /> 
     </li> 
    </ul> 
</div> 

<div id="nav"> 
    <ul> 
     <li> 
      <img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" /> 
     </li> 
     <li> 
      <img src="http://media2.teenormous.com/items/www.uneetee.com/product_images-d-775-HiddenAnimals__39659_std.jpg" /> 
     </li> 
     <li> 
      <img src="http://media1.teenormous.com/items/media.80stees.com/images-products-Ladies-Slim-Fit-Animal-Shirt.jpg" /> 
     </li> 
     <li> 
      <img src="http://astorenet.com/wp-content/uploads/2011/04/wpid-67-petrol-rc-car.jpg" /> 
     </li> 
    </ul> 
</div> 

jQueryの

$('#nav li').click(function(){ 
    var _this = $(this); 
    $('#viewport ul').animate({ 
     left: -1* _this.index() * $('#viewport ul li').eq(_this.index()).children('img').width() 
    },500); 
}); 

CSS私が何をしたいことは、このhttp://jsfiddle.net/7SLrL/1/のように、ビューポートの背後にあるリストをビューポートを作成し、アニメーション化することであると考えてい：

#viewport { 
    width:350px; 
    height:350px; 
    overflow:hidden; 
    margin-bottom:10px; 
    border:1px solid #000; 
} 

#nav { 
    width:350px; 
    height:40px; 
} 

#viewport ul { 
    padding:0; 
    margin:0; 
    width:1400px; /* 350px per photo * 4 photos*/ 
    position:relative; 
} 

#viewport img { 
    width:350px; 
    height:350px; 
} 

#nav img { 
    width:40px; 
    height:40px; 
    cursor:pointer; 
} 

li { 
    float:left; 
}