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
时间： 2024-11-06 11:23:53