横向不间断滚动DIV

横向不间断滚动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;
        }

源码我已修改过了