横向不间断滚动DIV

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