试图让scrollTo可以水平工作 [英] Trying to get scrollTo to work horizontally

问题描述

我正在尝试使jQuery scrollTo插件能够水平工作，因此我整理了一些jsfiddle.

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/

现在，如果没有javascript，它只会替换每个图像(img 1，img 2等)，但是一旦建立了jQuery，它就不会触发.

Now, without the javascript, it simply replaces each image (img 1, img 2, etc), but once the jQuery is instituted it doesn't fire.

任何帮助将不胜感激！

推荐答案

根据您的评论:

我将每个id ="image#"用于 水平滚动并替换， 而不是仅仅更换.像这样 jsfiddle.net/P9B5y，除了那里 是一个临界值，这只会允许 一个人要显示的一个ID 时间，因为有些等待

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

我不相信您想要的scrollTo插件.我相信您想要的是创建一个视口，并为该视口后面的列表设置动画，例如 http://jsfiddle .net/7SLrL/1/:

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

这篇关于试图让scrollTo可以水平工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！