一屏展示多个li轮播设置demo,一般要从数据库中调出数据,按之前写过的轮播方法(一个li是一屏),需要判断分页,要嵌套循环输出数据,此次写的方法不用再判断分页了,JS根据一屏显示多少个li设置分页效果
只需对head中设置元素的CSS样式进行修改,即可改变显示效果
一屏放5个
一屏放6个
demo代码(一屏5个或6个在CSS及JS部分有注释):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一屏展示多个li轮播设置demo</title>
<style>
*{margin: 0;padding: 0;}
#showPage{width: 1000px; height: 120px; padding: 20px 0; margin:0 auto; background-color: #ccc; overflow: hidden; position: relative;}
#showPage ul , #showPage li{height: 100%;list-style: none;}
/*一屏放5个*/
/*#showPage li{width: 188px; margin-right: 15px;background-color: #eee; float: left;}*/
/*一屏放6个*/
#showPage li{width: 155px; margin-right: 14px;background-color: #eee; float: left;}
#setPage{width: 100%; height: 20px; text-align: center; position: absolute; left: 0; bottom: 0;}
#setPage a{display: inline-block; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #fff; vertical-align: middle;}
#setPage a.setPageIn{ background-color: #d00;}
</style>
</head>
<body>
<div id="showPage">
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>222222222222</li>
<li>222222222222</li>
<li>222222222222</li>
<li>222222222222</li>
<li>222222222222</li>
<li>33333333333</li>
<li>33333333333</li>
<li>33333333333</li>
<li>33333333333</li>
<li>33333333333</li>
<li>4444444444444</li>
<li>4444444444444</li>
<li>4444444444444</li>
<li>4444444444444</li>
<li>4444444444444</li>
<li>5555555555</li>
<li>5555555555</li>
<li>5555555555</li>
<li>5555555555</li>
<li>5555555555</li>
</ul>
<div id="setPage"></div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script>
//box : 切换主体盒子ID
//boxW : 切换主体盒子 的宽度
//liLen : 每页几个li
//delay : 定时切换页面时间
function ListChange(box , boxW , liLen , delay){
var $box = $('#' + box);
var $ul = $('#' + box + ' ul');
var $li = $('#' + box + ' li');
$('#' + box + ' li:nth-child(' + liLen + 'n)').css('margin-right',0);
var page = parseInt($li.length / liLen);
page = $li.length % liLen > 0 ? page + 1 : page;
$ul.css('width',boxW * page);
if(page > 1){
for(var i = 0 ; i < page ; i++){
if(i==0){
$('#setPage').append('<a class="setPageIn" href="javascript:void(0)"></a>');
}else{
$('#setPage').append('<a href="javascript:void(0)"></a>');
}
}
$('#showPage').on('click','#setPage a',function(){
clearTimeout(curTimer);
var $this = $(this);
curpage = $this.index();
$ul.stop().animate({'margin-left':-curpage * boxW},'slow',function(){
curTimer = setTimeout(changePage,delay);
});
$this.addClass('setPageIn').siblings().removeClass('setPageIn');
});
var curpage = 0;
var curTimer = setTimeout(changePage,delay);
function changePage(){
curpage++;
if(curpage >= page){
curpage = 0;
}
$('#setPage a').eq(curpage).trigger('click');
curTimer = setTimeout(changePage,delay);
}
}
}
//一屏所放的个数,CSS设置在head部分有注释
//一屏放5个
//ListChange('showPage',1000,5,3000);
//一屏放6个
ListChange('showPage',1000,6,3000);
</script>
</body>
</html>