原生js 手写轮播图

这是html里的代码，整体的内容展示 

	        <div class="picShow">
			    <ul class="picUl" id="picUl">
			        <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
			        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
			        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
			        <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
			        <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
			    </ul>
			    <div class="picDots" id="picDots"></div>
			</div>

css样式段

*{
		    margin: 0;
		    padding: 0;
		}
		img{
		    border:none;
		}
		ul,li,ol{
		    list-style: none;
		}
		.picShow{
		    position: relative;
		    margin-left: auto;
		    margin-right: auto;
		}
		.picShow,
		.picUl>li,
		.picUl>li>a{
		    width: 400px;
		    height: 400px;
		    overflow: hidden;
		}
		.picUl>li>a{
		    display: block;
		}
		.picUl>li{
		    position: absolute;
		    top:0;
		    left:0;
		    display: none;
		}
		.picUl>li.show{
		    display: block;
		}
		.picDots {
		    position: absolute;
		    right:20px;
		    bottom:20px;
		}
		.picDots span{
		    display: inline-block;
		    width: 16px;
		    height: 16px;
		    background: #fff;
		    margin-left: 10px;
		    cursor: pointer;
		}
		.picDots span.on{
		    background: #f30;
		}
		@keyframes showAni {
		    0%{
		        opacity: 0;
		    }
		    100%{
		        opacity: 1;
		    }
		}
		@keyframes hideAni {
		    0%{
		        opacity: 1;
		    }
		    100%{
		        opacity: 0;
		    }
		}
		.picUl img{
			width: 100%;
			height: 100%;
		}

js里面代码实行操作功能

每次切换时需点击来实现效果，大概理解就是，我们需要获取需操作的DOM节点，其中每个li 都是动态获取的，获取DOM节点，使用createElement(),添加类,移除，根据给到的伪元素来判断，当前显示的图片index[0]，下标是否显示或者隐藏。其中还使用到了animation动画效果，显示或隐藏操作后的动画效果。

        let li = document.querySelectorAll("#picUl>li");
		let dots = document.getElementById("picDots");
		// 传空值
		let span = [];
		// 封装方法名
		function  init(){
		    for(let i=0; i<=li.length-1 ; i++ ){
		        // 动态生成轮播的控制点
				
		        let newSpan = document.createElement("span");
		        dots.appendChild(newSpan);
		        span.push(newSpan);
		        if( i===0 ){
		            newSpan.className = "on";
		        }
		        // 给每个 li 添加 animationend 事件
		        li[i].addEventListener("animationend",function(event){
		            if( event.animationName === "hideAni"){
		                this.classList.remove("show");
		            }
		        });
		    }
		    showTag(li[0]);
		}
	
		// 显示某个标签
		function showTag(tag){
		    tag.classList.add("show");
		    tag.style.animation = `showAni 0.5s both`;
		}
		// 隐藏某个标签
		function hideTag(tag){
		    tag.style.animation = `hideAni 0.5s both`;
		}
		init(); // 初始化函数
		// 给 span 添加事件
		for(let i=0 ; i<= span.length-1; i++){
		    span[i].addEventListener("click",function(){
		        this.classList.add("on");
		        showTag(li[i]);
		        // 其余的点去掉 on，其余的 li 隐藏。
		        for(let j=0 ; j<=span.length-1 ; j++ ){
		            if( j!==i){
		                span[j].classList.remove("on");
		                hideTag(li[j]);
		            }
		        }
		    });
		}
		for(let i=0;i<=span.length-1;i++){
			span[i]
		}

效果图，如下 每次切换都需要点击才可实现