横向不间断滚动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;
}
源码我已修改过了