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

最新推荐文章于 2024-07-12 10:13:57 发布

羽筠

最新推荐文章于 2024-07-12 10:13:57 发布

阅读量3.7k

点赞数 4

分类专栏： JS

本文链接：https://blog.csdn.net/qq_16494241/article/details/78195407

版权

JS 专栏收录该内容

72 篇文章 0 订阅

订阅专栏

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