Question

我正在尝试让jQuery scrollTo插件水平工作，所以我把一个小混蛋放在一起。

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

现在，没有javascript，它只是替换每个图像（img 1，img 2等），但是一旦jQuery被创建它就不会触发。

非常感谢任何帮助！

Answer 1

根据您的评论：

我会将每个id =“image＃”生活在水平滚动，并替换，而不仅仅是替换。像这样; 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;
}

试图让scrollTo水平工作

1 个答案: