淡入淡出轮播图

渐现轮播图

这是一个原生手撸渐现型的轮播图

• 淡入淡出
• 移入移出
• 添加前后按钮
• *添加小图（动画效果）

---

一言不合就上代码

js代码块

document.addEventListener('DOMContentLoaded',function(){
            let focus = document.querySelector('#focus');
            let bigpic = focus.querySelector('#bigpic');
            let bigItems = bigpic.children;
            let small_wrap = bigpic.nextElementSibling;
            let smallpic = document.querySelector('#smallpic');
            let bigItems1 = smallpic.children;
            let baseWidth = bigItems1[0].offsetWidth;
            smallpic.style.width = baseWidth*bigItems1.length + 'px';
             let len = bigItems.length;
            let index = 0;
            let lastIndex = 0;
            for(let i=0;i<len;i++){
                if(i!==index){
                    animation(bigItems[i],'opacity',0);
                    animation(bigItems1[i],'opacity',0.3);
                }
            }
            let timer = setInterval(autoPlay,2000);
            let btnPrev = document.createElement('btnPrev');
            btnPrev.className = 'prev';
            btnPrev.innerHTML = '&lt;';
            focus.appendChild(btnPrev);
            let btnNext = document.createElement('btnNext');
            btnNext.className = 'next';
            btnNext.innerHTML = '&gt;';
            focus.appendChild(btnNext);
            focus.onclick = e=>{
                e = e || window.event;
                var target = e.target || e.srcElement;
                if(target.className.toLowerCase()==='prev'){
                    index--;
                    showImg();
                }
                if(target.className.toLowerCase()==='next'){
                    index++;
                    showImg();
                }
            }
            focus.onmouseenter = ()=>{
                clearInterval(timer);
            }
            focus.onmouseleave = ()=>{
                timer = setInterval(autoPlay,2000);
            }
            function autoPlay(){
                index++;
                showImg();
            }
            function showImg(){
                if(index >= len){
                    index = 0;
                }else if(index < 0){
                    index = len - 1;
                }
                animation(bigItems[index],'opacity',1);
                animation(bigItems[lastIndex],'opacity',0);
                animate(smallpic,{left:-baseWidth*index});
                animation(bigItems1[index],'opacity',1);
                animation(bigItems1[lastIndex],'opacity',0.3);
                lastIndex = index;
            }
        });

html代码块

<div id="focus">
        <ul id="bigpic">
            <li><img src="img/001.jpg"></li>
            <li><img src="img/002.jpg"></li>
            <li><img src="img/003.jpg"></li>
            <li><img src="img/001.jpg"></li>
            <li><img src="img/002.jpg"></li>
            <li><img src="img/003.jpg"></li>
            <li><img src="img/001.jpg"></li>
        </ul>
        <div class="small_wrap">
           <ul id="smallpic">
               <li><img src="img/001.jpg"></li>
               <li><img src="img/002.jpg"></li>
               <li><img src="img/003.jpg"></li>
               <li><img src="img/001.jpg"></li>
               <li><img src="img/002.jpg"></li>
               <li><img src="img/003.jpg"></li>
               <li><img src="img/001.jpg"></li>
           </ul>
       </div>
    </div>