試圖讓scrollTo水平工作

Question

我想讓jQuery scrollTo插件水平工作，所以我已經放在一起了一個小jsfiddle。

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

現在，沒有的JavaScript，它只是替換每個圖像（圖1，圖2，等等），但是一旦jQuery是提起它不火。

任何幫助將不勝感激！

Answer 1

基於您的評論：

我會住水平每個ID = 「＃圖像」 來 滾動和更換， 而不僅僅是更換。像這樣; jsfiddle.net/P9B5y，除了會有 是停產，這將只允許在一個特定的 時間顯示 一個ID，如反對一些等待

我不相信scrollTo插件是你想要的。我相信你想要的是創建一個視口，動畫視後面的列表中，這樣http://jsfiddle.net/7SLrL/1/：

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 ：

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