横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>横向不间断滚动DIV</title> 6 <link href="css/jQuery.scrollSomething-1.0.0.css" rel="stylesheet" type="text/css" /> 7 <link href="css/Comm.css" rel="stylesheet" type="text/css" /> 8 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> 9 <script src="js/jQuery.scrollSomething-1.0.0.js" type="text/javascript"></script> 10 </head> 11 <script type="text/javascript"> 12 $(document).ready(function () { 13 $("#ScrollebleItems").html(""); 14 var dataCount = 6; //可以任意修改总个数,但是图片就没有那么多了嘿嘿 15 var ItemCount = 5; //表示一组显示几个项 16 var dateItem; //表示有几个组 17 debugger; 18 if (dataCount < ItemCount || dataCount == ItemCount) { 19 dateItem = 1; 20 } else { 21 dateItem = parseInt((dataCount % ItemCount) == 0) ? parseInt(dataCount / ItemCount) : parseInt(dataCount / ItemCount) + 1; 22 } 23 var divHtml = ''; 24 for (var i = 0; i < dateItem; i++) { 25 divHtml += '<div class="wrapLight"><ul class="scrollerUL">'; 26 for (var j = 0; j < ItemCount; j++) { 27 var row = i * ItemCount + j; 28 if (row < dataCount) { 29 divHtml += '<li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"><img src="image/' + row + '.png" alt="Orange"/><div> Orange </div></a></li>'; 30 } 31 } 32 divHtml += "</ul></div>"; 33 } 34 $("#ScrollebleItems").append(divHtml); 35 36 $("#ScrollebleItems").scrollSomething({ 37 scrollerWidth: 500, //设置滚动宽度 38 scrollerHeight: 70, //滚动高度 39 scrollInterval: 5000, //自动滚动切换时间 40 scrollPrefix: "scroll", 41 itemsVisable: 1, 42 itemsScrolling: 1, 43 buttonSettings: "", //hover buttonSettings: "hover" 设置控制按钮默认不显示,鼠标移上才显示 44 buttonPosition: "bottomRight" //设置控制按钮布局方向 bottomRight bottomLeft topRight topLeft 45 }); 46 }); 47 </script> 48 <body> 49 <div class="align-center"> 50 <p> 51 js 控制横向不间断滚动DIV 52 <br /> 53 网上找的插件,自己通过小改写弄成符合自己的<br /> 54 </p> 55 <p> 56 有兴趣的同学可以自己改改，jQuery.scrollSomething-1.0.0.js<br /> 57 自己只是用到了皮毛,里面结构比较清晰，看起来还可以，听说主要兼容IE，FF<br /> 58 IE11 亲测,就是我做demo的版本,其他的不保证<br /> 59 </p> 60 <br /> 61 <div style=" 502px; height: 72px; border: 1px solid LightGray;"> 62 <div id="ScrollebleItems"> 63 <!--我采用的是使用js生成项--> 64 <!-- <div class="wrapLight"> 65 <ul class="scrollerUL"> 66 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"> 67 <img src="image/4.png" alt="Orange" /> 68 <div>Orange</div> </a></li> 69 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"> 70 <img src="/image/4.png" alt="Orange" /> 71 <div>Orange</div> </a></li> 72 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"> 73 <img src="image/4.png" alt="Orange" /> 74 <div>Orange</div> </a></li> 75 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"> 76 <img src="image/4.png" alt="Orange" /> 77 <div>Orange</div> </a></li> 78 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"> 79 <img src="image/4.png" alt="Orange" /> 80 <div>Orange</div> </a></li> 81 </ul> 82 </div> 83 <div class="wrapLight"> 84 <ul class="scrollerUL"> 85 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"> 86 <img src="image/4.png" alt="Orange" /> 87 <div>Orange</div> </a></li> 88 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"> 89 <img src="image/4.png" alt="Orange" /> 90 <div>Orange</div> </a></li> 91 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"> 92 <img src="image/4.png" alt="Orange" /> 93 <div>Orange</div> </a></li> 94 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"> 95 <img src="image/4.png" alt="Orange" /> 96 <div>Orange</div> </a></li> 97 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"> 98 <img src="image/4.png" alt="Orange" /> 99 <div>Orange</div> </a></li> 100 </ul> 101 </div>--> 102 </div> 103 </div> 104 </div> 105 </body> 106 </html>
效果图：
附件下载地址 http://files.cnblogs.com/Orange-C/scrollDemo.zip
出处http://www.cnblogs.com/Orange-C/p/4089352.html
上面的代码有个小BUG,判断个数时，应该这样写
if (dataCount < ItemCount || dataCount == ItemCount) { dateItem = 1; } else { dateItem = parseInt((dataCount % ItemCount) == 0) ? parseInt(dataCount / ItemCount) : parseInt(dataCount / ItemCount) + 1; }
源码我已修改过了