手写轮播图，读完你也可以自己写。

ゞ浴缸里的玫瑰 2021-10-19 09:26 247阅读 0赞

看了setInterval方法直接上手卢一发轮播图，还是第一次写的哈哈  
主要用到：  
flex：flex布局  
addClass():添加样式  
removeClassv移除样式  
children()：获取孩子节点  
eq():获取指定的第几个li  
append()：向值得容器追加元素  
width()：获取宽度  
click()：点击事件  
css():给div赋新样式  
animate()：动画

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			div,ul,li,body,html{
    				list-style: none;
    				margin: 0px;
    				padding: 0px;
    			}
    			.bannner-div{
    				overflow: hidden;
    				width: 100%;
    			}
    			.bannner-div ul{
    				width: 100%;
    				
    				
    				display: -webkit-flex;
    				display: flex;
    				-webkit-justify-content: flex-end;
    				justify-content: flex-end;
    					
    			}
    			.bannner-div ul li{
    				display: none;
    				background: burlywood;
    				float: left;
    				text-align: center;
    				font-size: 30px;
    				
    				width: 100%;
    			}
    			.banner-i{
    				text-align: center;
    				display: inline-block;
    				width: 100%;
    			}
    			.banner-i i{
    				font-style: initial;
    				width: 10px;
    				height: 10px;
    				margin: 5px ;
    				display: inline-block;
    				background: #DEB887;
    				border-radius: 100px;
    			}
    			.banner-i .active{
    				background: #000;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="bannner-div">
    			<ul class="bannner1">
    				<li>
    					1
    				</li>
    				<li>
    					2
    				</li>
    				<li>
    					3
    				</li>
    				<li>
    					4
    				</li>
    				<li>
    					5
    				</li>
    			</ul>
    			<div class="banner-i">
    			</div>
    		</div>
    		<script type="text/javascript">
    			var number = 0;
    			var len = 0;
    			$(function(){
    				 bannerfunction('.bannner1','',2000);
    			})
    			
    			/**执行方法
    			 * @param {Object} divname:div的class或者id
    			 * @param {Object} n_name :如果需要增加可以自己写个名字来给相应的动画效果
    			 * @param {Object} n_time :动画切换时间
    			 */
    			function bannerfunction(divname,n_name,n_time){
    				var lis = $(divname).children();
    				
    				len = lis.length;
    				//根据li数量追加i数量,并给第一个添加active
    				for (var i = 0; i < len; i++) {
    					if(i == 0){
    						$(divname+'~div').append('<i  class="active"></i>')
    					}else{
    						$(divname+'~div').append('<i ></i>')
    					}
    				}
    				var widths = $(divname).width();//指定获取放入banner的容器div
    				console.log($(window).width())
    				//点击i切换事件
    				$(divname+'~div i').click(function() {
    					$(divname+'~div i').removeClass('active');
    					$(this).addClass('active');
    					var nu = $(this).index()-1;
    					number = nu;
    					animate_banner(divname,widths)
    				})
    				
    				$(divname).children().css('display','block')//阻止刷新弹跳
    				$(divname).width(widths*len)//给ul指定宽度
    				setInterval(
    					function(){
    						animate_banner(divname,widths)
    					},
    					n_time);//动画
    			}
    			
    			/**animate动画切换
    			 * @param {Object} clasname :容器class或id
    			 * @param {Object} widths   :宽度
    			 */
    			function animate_banner(clasname,widths){
    				var left = '';
    				//自动给i添加点击样式
    				$(clasname + '~div i').removeClass( 'active' )
    				var idiv = $(clasname+'~div i').eq( number + 1 ).addClass('active');
    				//如果数量小于li长度,每一次+1
    				if(   number < len-1 ){
    					number = number +1 ;
    					left = '-' + number * widths + 'px';//距离左边负像素点.
    				}else {
    					//否则数量为0跳到第一个li
    					number = 0
    					left = '0px';//距离左边0像素点
    				}
    				//动画事件animate
    				$(clasname).animate({marginLeft:left})
    			}
    		</script>
    	</body>
    </html>