横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

     <title>横向不间断滚动DIV</title>

     <link href="css/jQuery.scrollSomething-1.0.0.css" rel="stylesheet" type="text/css" />

     <link href="css/Comm.css" rel="stylesheet" type="text/css" />

     <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>

     <script src="js/jQuery.scrollSomething-1.0.0.js" type="text/javascript"></script>

 </head>

 <script type="text/javascript">

     $(document).ready(function () {

         $("#ScrollebleItems").html("");

         var dataCount = 6; //可以任意修改总个数,但是图片就没有那么多了嘿嘿

         var ItemCount = 5; //表示一组显示几个项

         var dateItem; //表示有几个组

         debugger;

         if (dataCount < ItemCount || dataCount == ItemCount) {

             dateItem = 1;

         } else {

             dateItem = parseInt((dataCount % ItemCount) == 0) ? parseInt(dataCount / ItemCount) : parseInt(dataCount / ItemCount) + 1;

         }

         var divHtml = '';

         for (var i = 0; i < dateItem; i++) {

             divHtml += '<div class="wrapLight"><ul class="scrollerUL">';

             for (var j = 0; j < ItemCount; j++) {

                 var row = i * ItemCount + j;

                 if (row < dataCount) {

                     divHtml += '<li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank"><img src="data:image/' + row + '.png" alt="Orange"/><div> Orange </div></a></li>';

                 }

             }

             divHtml += "</ul></div>";

         }

         $("#ScrollebleItems").append(divHtml);

         $("#ScrollebleItems").scrollSomething({

             scrollerWidth: 500, //设置滚动宽度

             scrollerHeight: 70, //滚动高度

             scrollInterval: 5000, //自动滚动切换时间

             scrollPrefix: "scroll",

             itemsVisable: 1,

             itemsScrolling: 1,

             buttonSettings: "", //hover  buttonSettings: "hover" 设置控制按钮默认不显示,鼠标移上才显示

             buttonPosition: "bottomRight" //设置控制按钮布局方向 bottomRight bottomLeft topRight topLeft

         });

     });

 </script>

 <body>

     <div class="align-center">

         <p>

             js 控制横向不间断滚动DIV

             <br />

             网上找的插件,自己通过小改写弄成符合自己的<br />

         </p>

         <p>

             有兴趣的同学可以自己改改，jQuery.scrollSomething-1.0.0.js<br />

             自己只是用到了皮毛,里面结构比较清晰，看起来还可以，听说主要兼容IE，FF<br />

             IE11 亲测,就是我做demo的版本,其他的不保证<br />

         </p>

         <br />

         <div style="width: 502px; height: 72px; border: 1px solid LightGray;">

             <div id="ScrollebleItems">

                 <!--我采用的是使用js生成项-->

                 <!--  <div class="wrapLight">

             <ul class="scrollerUL">

                 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank">

                     <img src="data:image/4.png" alt="Orange" />

                     <div>Orange</div> </a></li>

                 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank">

                     <img src="/image/4.png" alt="Orange" />

                     <div>Orange</div> </a></li>

                 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank">

                     <img src="data:image/4.png" alt="Orange" />

                     <div>Orange</div> </a></li>

                 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank">

                     <img src="data:image/4.png" alt="Orange" />

                     <div>Orange</div> </a></li>

                 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank">

                     <img src="data:image/4.png" alt="Orange" />

                     <div>Orange</div> </a></li>

             </ul>

         </div>

         <div class="wrapLight">

             <ul class="scrollerUL">

                 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank">

                     <img src="data:image/4.png" alt="Orange" />

                     <div>Orange</div> </a></li>

                 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank">

                     <img src="data:image/4.png" alt="Orange" />

                     <div>Orange</div> </a></li>

                 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank">

                     <img src="data:image/4.png" alt="Orange" />

                     <div>Orange</div> </a></li>

                 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank">

                     <img src="data:image/4.png" alt="Orange" />

                     <div>Orange</div> </a></li>

                 <li class="scrollerBox"><a href="http://www.cnblogs.com/Orange-C/" target="_blank">

                     <img src="data:image/4.png" alt="Orange" />

                     <div>Orange</div> </a></li>

             </ul>

         </div>-->

             </div>

         </div>

     </div>

 </body>

 </html>

效果图：

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

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

上面的代码有个小BUG,判断个数时，应该这样写

if (dataCount < ItemCount || dataCount == ItemCount) {

            dateItem = 1;

        } else {

            dateItem = parseInt((dataCount % ItemCount) == 0) ? parseInt(dataCount / ItemCount) : parseInt(dataCount / ItemCount) + 1;

        }

源码我已修改过了

横向不间断滚动DIV的更多相关文章

  1. div+css不间断滚动字幕

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  3. javascript-图片横向无缝隙滚动(可在服务器运行)

    前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了. css代码: <style type="text/cs ...

  4. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  5. jQuery内容横向拖拽滚动

    如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:3 ...

  6. 横向滚动div

    <div id="shelf"> <div class="books"><div> <div class=" ...

  7. 鼠标滚动div固定浮动-加锚点

    页面:    <div class="pa">        <div class="w-95-sl bdl-2"><a>标 ...

  8. jquery无缝间歇向上滚动(间断滚动)

    jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...

  9. js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. JavaScript、tabel切换完整版—自动切换—鼠标移入停止-移开运行

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Ecilpse快捷键

     编辑快捷键 [ALT+/] 显示代码提示,以及代码自动补全功能.  [Ctrl+/] 添加注释  [Ctrl+D] 删除当前行 窗口快捷键  [Ctrl+M] 窗口最大化和还原   查看和定位快捷键 ...

  3. Java WebService 简单实例

    前言:朋友们开始以下教程前,请先看第五大点的注意事项,以避免不必要的重复操作. 一.准备工作(以下为本实例使用工具) 1.MyEclipse10.7.1 2.JDK 1.6.0_22 二.创建服务端 ...

  4. JavaScript 函数声明，函数表达式，匿名函数，立即执行函数之区别

    函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...

  5. Hyper-V~双网卡设置

    Windows: Win10 有线网卡+无线网卡各一块 Hyper-V: 10.0.10240.16384 公司网络服务器180网段,公网192.168.0.*网段 家里网络:192.168.1.*网 ...

  6. 一起来做chrome扩展《本地存储localStorage》

    chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...

  7. 如何安装并使用hibernate tools

    参考资料:http://radiumwong.iteye.com/blog/358585 http://linjia880714.iteye.com/blog/859334 Hibernate Too ...

  8. JMeter学习-039-JMeter 3.0 生成 dashboard HTML 报告图表中文乱码

    近期,经常有人问 JMeter 3.0 使用时,生成的 HTML 报告图表中的中文乱码问题.在此,简略的说一下解决的方法. 编码相关信息如下: 1.查看控制 csv.xml 等配置结果文件生成.读取的 ...

  9. [原创]在Framelayout中放置button控件出现的覆盖问题

    android Framelayout(帧布局)是很常用的布局,主要用来处理需要多个view叠加显示的情况. 然而在使用中,我发现Framelayout中的Button控件,会挡住所有其他控件,而不论 ...

  10. randow()方法

    Math库里的static(静态)方法random(),该方法的作用是产生0和1之间的一个double值. 注意产生的值包括0不包括1.