jQuery Coda Slider 上下滑动

[ By:wenroo Data:2008-06-26 Reference: 0 ]

引用内容

10月10日用Coda Slider做的一个DEMO:
http://wenroo.com/demo/page/mydemo.html

底下有原始版本的DEMO...

    昨天Davyin说要有一个了老的项目，客户不知道从哪找来一个网站。上面有个图片的幻灯片滑块浏览。然后客户就问可不可以不要IMAGES，只要新闻和部分内容。但是就是要这个效果。
Davyin毫不犹豫的说没问题。然后就把我给叫了过去。

... .../* 中间省略N个字 */ ... ... //然后再省略N个字

    第一时间想到了jQuery Coda Slider

    但是会有个问题Coda Slider的滑块是左右的，现在客户需要是的上下滑动的新闻展示。研究一下

Coda-Slider.js，显示/隐藏还是JQ的老方法HIDDEN/SHOW，那么就简单了。只要让它HIDDEN掉的部分是

以竖排正确的放置在我的BOX里面就可以了，尝试修改。

引用内容

// 'float' : 'left', //把Coda-Slider.js

现在最主要的问题解决了。还有一个问题Coda-Slider上下滑块分别位于，BOX的左右两侧，因为本

来默认是左右滑动的嘛~！先看一下HTML，HTML上面并没有左右滑块的代码。那就JS自己生成的了。

程序代码

    var $scroll = $('#slider .scroll').css('overflow', 'hidden');

    // apply our left + right buttons
    $scroll
        .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
        .after('<img class="scrollButtons right" src="images/scroll_right.png" />');

代码里面写的很清楚，只是生成了两段干净的IMG标签。让我们修改起来很容易。

程序代码

.scrollButtons {
    position: absolute;
    top: 150px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -20px;
}

.scrollButtons.right {
    right: -20px;
}

其实我要的效果很简单就没有在JS上进行修改了，直接修改这三段CSS就可以

程序代码

.scrollButtons.left {coda-slider.css (line 83)
left:310px;
}

.scrollButtons.right {
left:310px;
top:310px;
}

.scrollButtons {
cursor:pointer;
position:absolute;
top:0px;
}

如果使用原版大小的点击图片，可以用上面列出的值。如果是自行大小的图片，直接修改其对应的LEFT,TOP就可以了。

解决问题。

引用内容

Coda_Slider 效果预览 //没有调整左右按钮位置。改变了左右滚动为上下滚动

引用内容

PS：今天有的事情不是很顺心，有点不舒服。只想说。万事总会有点挫折，人的一辈子不会总是那么平平坦坦，但是有一点很重要，遇到不管什么事情要有良好的心态，要对自己有十足的信心。要告诉自己其实我会做得更好。我以后会慢慢的弥补现在被自己丢失了的所有东西。那么，以后，以后的以后就会更好。

Code Slider 官网及DOME下载地址：

引用内容

http://www.ndoherty.com/demos/coda-slider/

[本日志由 wenroo 于 2008-11-07 09:45 AM 编辑]

一对老夫妻的故事