rolling several items

rollingDiv.rolling("left", 130, 100, 3); 1 parameter : the direction(left, right, top, bottom) 2 parameter : the width of item 3 parameter : the height of item 4 parameter : the count of viewing item(optional) the width(height) of rolling div is the width(height) of item * the count of viewing item. 1 <= the count of viewing item < item count

reverse rolling

rollingDiv.reverseRolling() left -> right right -> left bottom -> top top -> bottom

Added Item Count 4, Viewing Item Count 2

$(function() { var rollingDiv = $("#rolling1"); rollingDiv.rolling("down", 130, 100, 2); rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ayjjsallNwc' target='_new'><img src='http://i.ytimg.com/vi/ayjjsallNwc/default.jpg' width='130' height='100' alt='first item' border='0'/></a>"); rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=pe-MIDDfckw' target='_new'><img src='http://i.ytimg.com/vi/pe-MIDDfckw/default.jpg' width='130' height='100' alt='second item' border='0'/></a>"); rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=AyRIvX25vRQ' target='_new'><img src='http://i.ytimg.com/vi/AyRIvX25vRQ/default.jpg' width='130' height='100' alt='third item' border='0'/></a>"); rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=GxplDa3M5Io' target='_new'><img src='http://i.ytimg.com/vi/GxplDa3M5Io/default.jpg' width='130' height='100' alt='fourth item' border='0'/></a>"); rollingDiv.bind("mouseover", function() { $("#rolling1").stopRolling(); }); rollingDiv.bind("mouseout", function() { $("#rolling1").resumeRolling(); }); rollingDiv.startRolling(50, 0, 100); });

Added Item Count 4, Viewing Item Count 3

$(function() { var rollingDiv = $("#rolling2"); rollingDiv.rolling("left", 130, 100, 3); rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ayjjsallNwc' target='_new'><img src='http://i.ytimg.com/vi/ayjjsallNwc/default.jpg' width='130' height='100' alt='first item' border='0'/></a>"); rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=pe-MIDDfckw' target='_new'><img src='http://i.ytimg.com/vi/pe-MIDDfckw/default.jpg' width='130' height='100' alt='second item' border='0'/></a>"); rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=AyRIvX25vRQ' target='_new'><img src='http://i.ytimg.com/vi/AyRIvX25vRQ/default.jpg' width='130' height='100' alt='third item' border='0'/></a>"); rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=GxplDa3M5Io' target='_new'><img src='http://i.ytimg.com/vi/GxplDa3M5Io/default.jpg' width='130' height='100' alt='fourth item' border='0'/></a>"); rollingDiv.bind("mouseover", function() { $("#rolling2").stopRolling(); }); rollingDiv.bind("mouseout", function() { $("#rolling2").resumeRolling(); }); rollingDiv.startRolling(50, 0, 100); });

Added Item Count 4, Viewing Item Count 1

$(function() { var rollingDiv = $("#rolling3"); rollingDiv.rolling("right", 130, 100, 1); rollingDiv.addRollingItem("<div style='background-color:red;width:130;height:100'><table width='100%' height='100%'><tr><td align='center' valign='center'><font color='white'>A</font></td></tr></table></div>"); rollingDiv.addRollingItem("<div style='background-color:blue;width:130;height:100'><table width='100%' height='100%'><tr><td align='center' valign='center'><font color='white'>B</font></td></tr></table></div>"); rollingDiv.addRollingItem("<div style='background-color:green;width:130;height:100'><table width='100%' height='100%'><tr><td align='center' valign='center'><font color='white'>C</font></td></tr></table></div>"); rollingDiv.addRollingItem("<div style='background-color:gray;width:130;height:100'><table width='100%' height='100%'><tr><td align='center' valign='center'><font color='white'>D</font></td></tr></table></div>"); rollingDiv.bind("mouseover", function() { $("#rolling3").stopRolling(); }); rollingDiv.bind("mouseout", function() { $("#rolling3").resumeRolling(); }); rollingDiv.startRolling(50, 1000, 100); });