一屏展示多个li轮播设置demo

来源：互联网发布：万网域名续费多少钱编辑：程序博客网时间：2024/05/22 04:30

一屏展示多个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>

阅读全文

0 0