横向不间断滚动DIV
横向不间断滚动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的更多相关文章
- div+css不间断滚动字幕
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- javascript-图片横向无缝隙滚动(可在服务器运行)
前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了. css代码: <style type="text/cs ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- jQuery内容横向拖拽滚动
如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:3 ...
- 横向滚动div
<div id="shelf"> <div class="books"><div> <div class=" ...
- 鼠标滚动div固定浮动-加锚点
页面: <div class="pa"> <div class="w-95-sl bdl-2"><a>标 ...
- jquery无缝间歇向上滚动(间断滚动)
jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 使用Hibernate SQLQuery（转）
原文地址:http://itindex.net/detail/51776-hibernate-sqlquery-sql,重新排了一下版 Hibernate对原生SQL查询的支持和控制是通过SQLQue ...
- 3.Powershell编辑器
工欲善其事,必先利其器.有个得心应手的工具会使你的学习事半功倍.使用什么工具来编辑Powershell指令比较方便呢?笔者前后使用过几个编辑器,有几个比较不错推荐给大家试用. Powershell I ...
- 数据库使用数据泵迁移遇到LOB字段
impdp system/Clic1234 attach=SYS_IMPORT_ILEARN_TRA desc ILEARN_TRA.NOTIFI_TACTIC desc ILEARN_TRA.MSG ...
- 关于iis8.5中发布的网站无法连接数据库的解决方案。
发布的网站在浏览时出现如下提示: “/”应用程序中的服务器错误. 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL ...
- mvc学习（二）
1.后台foreach 与 html的关系 <table border="1">@for (var i = 0; i < 10; i++){@Html.Raw(i ...
- CSP -- 运营商内容劫持（广告）的终结者
缘由 我们公司最近手机端H5 经常受到商户和用户的投诉,说有广告并且导致不能正常进行操作,我们商户自己当然不会加广告了,但是商户和用户可不管这些了,就认为是我们的问题 探索发现根本 目前我们用的很多浏 ...
- Thinkphp控制器，1.多层控制器2.多级控制器
1.多层控制器 ThinkPHP的控制器支持多层和多级,多层指的是控制器可以分层,例如除了默认的Controller控制器层(我们可以称之为访问控制器),还可以添加事件控制器(层),例如: ├─Con ...
- async 和 await小结
三大返回值: 返回类型 - Task<TResult> 返回类型 - Task 返回类型 - void 当你添加 async 关键字后,需要返回一个将用于后续操作的对象,请使用 Task& ...
- python 面向对象（进阶篇）
上一篇<Python 面向对象(初级篇)>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使 ...
- 解决wampserver3.0.4远程不能访问问题
在windows2008服务器上安装wampserver3.0.4集成环境,默认却是无法远程访问,如果要远程访问需要修改apache的配置文件httpd.conf,修改如下: <Director ...