Trying to get scrollTo to work horizontally
I'm trying to get the jQuery scrollTo plugin to work horizontally, so I've put together a little jsfiddle.
http://jsfiddle.net/P9B5y/15/
Now, without the javascript, it simply replaces each image (img 1, img 2, etc), but once the jQuery is instituted it doesn't fire.
Any help would be greatly ap开发者_如何学运维preciated!
Based on your comment:
I would live each id="image#" to scroll horizontally, and replace, rather than just replacing. Like so; jsfiddle.net/P9B5y, except there would be a cut-off, that would only allow one id to be shown at one particular time, as oppose to some waiting
I don't believe the scrollTo plugin is what you want. I believe what you want is to create a viewport, and animate a list behind the viewport, like this 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;
}
精彩评论