首页 > 代码库 > 横向不间断滚动DIV
横向不间断滚动DIV
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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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
横向不间断滚动DIV
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。