横向不间断滚动DIV

最新推荐文章于 2024-03-20 14:51:20 发布

xincppba8

最新推荐文章于 2024-03-20 14:51:20 发布

阅读量513

点赞数

本文链接：https://blog.csdn.net/xincppba8/article/details/41013069

版权

 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

xincppba8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
横向不间断滚动DIV

1 DOCTYPE html> 2 html> 3 head> 4 meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 title>横向不间断滚动DIVtitle> 6 link href="css/jQuery.scrollSomething-1.0.
复制链接

扫一扫