1

我有一个 html<li>元素列表，我希望它使用 jQuery 水平滚动并让当前日期显示更大，这是我可以做的文本效果，但我不知道如何编写水平滑块。

说我到目前为止只有以下内容或查看jsFiddle 

<div class="yearswrapper">
    <ul class="yearslist">
        <li><a href="">2003</a></li>
        <li><a href="">2004</a></li>
        <li><a href="">2005</a></li>
        <li><a href="">2006</a></li>
        <li><a href="">2007</a></li>
        <li><a href="">2008</a></li>
        <li><a href="">2009</a></li>
        <li><a href="">2010</a></li>
        <li><a href="">2011</a></li>
        <li><a href="">2012</a></li>
        <li><a href="">2013</a></li>
    </ul>
    <p id="left">Slide Left</p>
    <p id="right">Slide right</p>
</div>

css.css

.yearslist li {
     display:inline;
}
4

2 回答 2

1

查看jQuery滑块： http: //jqueryui.com/slider/（确保您下载了 jQuery、jQuery UI 和 UI CSS）。

一旦你有了一个工作滑块，就会有一个名为slide. 每次用户更改滑块的值时，它都会检查此幻灯片事件。这个概念是您将检查slide事件的值并相应地更改CSS。

$( '#slider' ).slider({
    value: 1, // start at first li
    step: 1,  // slider moves up and down one to check each year
    max: 13,  // end at year 2013
    slide: function( event, ui ) {
        //check against the ui.value and change CSS
        $( 'li' ).eq( ui.value ).css( 'font-weight', 'bold' );
    }
})

jQuery这里有关于滑块的更多文档：http: //api.jqueryui.com/slider/

于 2013-10-07T14:57:14.210 回答
0

如果您在“yearswrapper”上使用溢出，则可以显示一个水平滚动条。然后，您可以定位滚动条 - 此页面可能会有所帮助：

http://api.jquery.com/?s=scroll

或者这可能会有所帮助：

具有自定义外观的跨浏览器内容滚动器

于 2013-10-07T14:50:05.210 回答