橫向不間斷滾動DIV

時間 2019-11-18

標籤橫向不間斷滾動 div 欄目 CSS 简体版

原文原文鏈接

橫向不間斷滾動DIV,5個一組,js控制,自動生成任意組顯示javascript

  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="width: 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>

效果圖：css

附件下載地址 http://files.cnblogs.com/Orange-C/scrollDemo.ziphtml

出處http://www.cnblogs.com/Orange-C/p/4089352.html java

上面的代碼有個小BUG,判斷個數時，應該這樣寫jquery

if (dataCount < ItemCount || dataCount == ItemCount) {
            dateItem = 1;
        } else {
            dateItem = parseInt((dataCount % ItemCount) == 0) ? parseInt(dataCount / ItemCount) : parseInt(dataCount / ItemCount) + 1;
        }

源碼我已修改過了app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。