JQuery 图片滚动插件 - jcarousel
2010-08-14 20:29 音乐让我说 阅读(6089) 评论(1) 编辑 收藏 举报代码1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>演示1 - 入门</title> <link href="/css/JQueryJcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" /> <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/js/jquery.jcarousel.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel(); });</script></head><body> <ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li> <li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li> <li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li> <li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li> <li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li> <li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li> <li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li> <li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li> <li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li> <li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li> </ul></body></html> |
效果图如下：
代码2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>演示2 - 简单的配置</title> <link href="/css/JQueryJcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" /> <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/js/jquery.jcarousel.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ start: 3, vertical: true, /* 是否垂直滚动 */ wrap: "circular", /* 循环 */ scroll: 3 /* 每次滚动的个数 */ }); });</script></head><body> <ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li> <li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li> <li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li> <li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li> <li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li> <li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li> <li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li> <li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li> <li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li> <li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li> </ul></body></html> |
效果图如下：
代码3：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>演示3 - 多个同时滚动</title> <link href="/css/JQueryJcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" /> <link href="/css/JQueryJcarousel/skins/ie7/skin.css" rel="stylesheet" type="text/css" /> <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/js/jquery.jcarousel.min.js" type="text/javascript"></script> <script type="text/javascript"> function carouselShape_initCallback(carousel) { carousel.buttonNext.bind('click', function() { carousel.startAuto(0); }); carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); }); carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); }; jQuery(document).ready(function() { jQuery('.first-and-second-carousel').jcarousel( { auto: 1, wrap: "last", scroll: 3, /* 每次滚动的个数 */ initCallback: carouselShape_initCallback }); jQuery('#third-carousel').jcarousel(); });</script></head><body> <ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango"> <li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li> <li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li> <li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li> <li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li> <li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li> <li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li> <li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li> <li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li> <li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li> <li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li> </ul> <hr size="1"/> <ul id="second-carousel" class="first-and-second-carousel jcarousel-skin-ie7"> <li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li> <li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li> <li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li> <li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li> <li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li> <li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li> <li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li> <li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li> <li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li> <li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li> </ul> <hr size="1"/> <ul id="third-carousel" class="jcarousel-skin-tango"> <li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li> <li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li> <li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li> <li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li> <li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li> <li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li> <li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li> <li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li> <li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li> <li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li> </ul> <hr size="1"/></body></html> |
效果图如下：
代码4：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>演示4 - 上一个、下一个、快速转到</title> <link href="/css/JQueryJcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .jcarousel-control { margin-bottom: 10px; text-align: center; } .jcarousel-control a { font-size: 75%; text-decoration: none; padding: 0 5px; margin: 0 0 5px 0; border: 1px solid #fff; color: #eee; background-color: #4088b8; font-weight: bold; } .jcarousel-control a:focus, .jcarousel-control a:active { outline: none; } .jcarousel-scroll { margin-top: 10px; text-align: center; } .jcarousel-scroll form { margin: 0; padding: 0; } .jcarousel-scroll select { font-size: 75%; } #mycarousel-next, #mycarousel-prev { cursor: pointer; margin-bottom: -10px; text-decoration: underline; font-size: 11px; } </style> <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/js/jquery.jcarousel.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> function mycarousel_initCallback(carousel) { jQuery('.jcarousel-control a').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); jQuery('.jcarousel-scroll select').bind('change', function() { carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value); return false; }); jQuery('#mycarousel-next').bind('click', function() { carousel.next(); return false; }); jQuery('#mycarousel-prev').bind('click', function() { carousel.prev(); return false; }); }; jQuery(document).ready(function() { jQuery("#mycarousel").jcarousel({ scroll: 1, initCallback: mycarousel_initCallback, // This tells jCarousel NOT to autobuild prev/next buttons buttonNextHTML: null, buttonPrevHTML: null }); }); </script></head><body><div id="mycarousel" class="jcarousel-skin-tango"> <div class="jcarousel-control"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div> <ul class="jcarousel-skin-tango"> <li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li> <li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li> <li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li> <li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li> <li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li> <li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li> <li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li> <li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li> <li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li> <li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li> </ul> <div class="jcarousel-scroll"> <form action=""> <a href="#" id="mycarousel-prev">« 向上</a> <select> <option value="1">Scroll 1 item per click</option> <option value="2">Scroll 2 items per click</option> <option value="3">Scroll 3 items per click</option> <option value="4">Scroll 4 items per click</option> <option value="5">Scroll 5 items per click</option> </select> <a href="#" id="mycarousel-next">向下 »</a> </form> </div> </div></body></html> |
效果图如下：
代码5：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>演示7 - 入门</title> <link href="/css/JQueryJcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" /> <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/js/jquery.jcarousel.min.js" type="text/javascript"></script> <link href="../js/thickbox/thickbox.css" rel="stylesheet" type="text/css" /> <script src="../js/thickbox/thickbox.js" type="text/javascript"></script> <script type="text/javascript"> // Set thickbox loading image var tb_pathToImage = "/js/thickbox/loading-thickbox.gif"; var mycarousel_itemList = [ { url: "/images/001.jpg", title: "Flower1" }, { url: "/images/002.jpg", title: "Flower2" }, { url: "/images/003.jpg", title: "Flower3" }, { url: "/images/004.jpg", title: "Flower4" }, { url: "/images/005.jpg", title: "Flower5" }, { url: "/images/006.jpg", title: "Flower6" }, { url: "/images/007.jpg", title: "Flower7" }, { url: "/images/008.jpg", title: "Flower8" }, { url: "/images/009.jpg", title: "Flower9" }, { url: "/images/010.jpg", title: "Flower10" } ]; function mycarousel_itemLoadCallback(carousel, state) { alert("carousel.first：" + carousel.first + "。carousel.last：" + carousel.last); for (var i = carousel.first; i <= carousel.last; i++) { if (carousel.has(i)) { alert("已存在"); continue; } alert("还没有，则创建"); if (i > mycarousel_itemList.length) { break; } // Create an object from HTML var tempObj = mycarousel_getItemHTML( mycarousel_itemList[i - 1] ); var item = jQuery(tempObj).get(0); // Apply thickbox tb_init(item); carousel.add(i, item); } }; function mycarousel_getItemHTML(item) { var url_m = item.url.replace(/_s.jpg/g, '_m.jpg'); return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /><br/><span>速度发生的斯蒂芬</span></a>'; }; jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ size: mycarousel_itemList.length, itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback } }); }); </script></head><body> <ul id="mycarousel" class="jcarousel-skin-tango"> </ul></body></html> |
更多请上该插件官网
等待更新...
作者：音乐让我说（音乐让我说 - 博客园）
出处：http://music.cnblogs.com/
文章版权归本人所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步