element走马灯拖拽 ui走马灯

类element-ui走马灯效果

这是通过element-ui做出来的效果，所以想试试用js和css能不能做出这种效果

主体部分

<div class="box">
    <ul>
        <li><img src="image/ssr不知火.png" alt=""></li>
        <li><img src="image/ssr缘结神.png" alt=""></li>
        <li><img src="image/ssr面灵气.png" alt=""></li>
        <li><img src="image/ssr彼岸花.png" alt=""></li>
        <li><img src="image/ssr千姬.png" alt=""></li>
        <li><img src="image/ssr铃鹿御前.png" alt=""></li>
        <li><img src="image/sp雪女.png" alt=""></li>
        <li><img src="image/sp浮世青行灯.png" alt=""></li>
    </ul>
    <span class="left"><</span>
    <span class="right">></span>
</div>
<ol>//这是下方点击按钮，通过js判断有几张图片添加小li
</ol>

css样式部分

<style>
     *{
         margin: 0;
         padding: 0;
     }
     //定义主体盒子宽高，并设置overflow：hidden
     .box{
         width: 830px;
         height: 696px;
         position: relative;//设置父盒子定位
         overflow: hidden;
     }
     //装图片的ul
     ul{
         position: absolute;
         width: 1000%;//让所有图片都能装下
         height: 696px;
     }
     ul li{
         list-style: none;
         float: left;//让图片呈一排显示
     }
     //定义图片背景颜色，方便区分
     ul li:nth-child(2n) {
         background-color: #99a9bf;
     }
     ul li:nth-child(2n+1) {
         background-color: #d3dce6;
     }
     //定义下方控制按钮
     ol{
         width: 400px;
         position: absolute;
         left: 215px;
         top:706px;
         display: flex;//利用flex布局让小li一排显示
         flex-flow: nowrap;
         justify-content: space-between;
     }
     ol li{
         list-style: none;
         height: 8px;
         width: 40px;
         background-color: rgba(135,206,235,0.3);
     }
     //因为后面会多出一个小li，来呈现平滑的移动，所以将最后一个小li隐藏
     ol li:nth-last-of-type(1){
         display: none;
     }
     //点击的小li添加这个类名
     .current{
         background-color: rgba(135,206,235,1);
     }
     //左右按钮
     .left,.right{
         position: absolute;
         top: 45%;
         width: 35px;
         height: 35px;
         font-size: 15px;
         border-radius: 50%;
         background-color: rgba(31,45,61,.11);
         line-height: 33px;
		text-align: center;
		color: #fff;
     }
     .left{
         left: -10px;
         opacity: 0;
     }
     .right{
         right: -10px;
         opacity: 0;
     }
     //覆盖变背景色
     .left:hover,.right:hover{
         transition: all 0.5s ease;
         background-color: rgba(31,45,61,.31);
     }
     //利用动画帧函数来做动画，淡入淡出效果
     @keyframes leftIn{
         from{left:-10px;opacity: 0}
         to{left:20px;opacity: 1}
     }
     @keyframes rightIn{
         from{right:-10px;opacity: 0}
         to{right:20px;opacity: 1}
     }
     @keyframes leftLeave{
         from{left:20px;opacity: 1}
         to{left:-10px;opacity: 0}
     }
     @keyframes rightLeave{
         from{right:20px;opacity: 1}
         to{right:-10px;opacity: 0}
     }
 </style>

js部分

//定义动画移动函数
	function animate(obj,target,callback){
        clearInterval(obj.timer);
        obj.timer = setInterval(function (){
            let step = (target - obj.offsetLeft)/10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft=== target) {
                clearInterval(obj.timer);
                callback && callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        },15)
    }
    //获取元素
    let left = document.querySelector('.left');
    let right = document.querySelector('.right');
    let box = document.querySelector('.box');
    let boxWidth = box.clientWidth;//获取盒子宽度
    let num = 0;//定义一个num
    let ul = document.querySelector('ul');
    let ol = document.querySelector('ol');
    //lis为ol里面的所有小li
    let lis = document.querySelectorAll('ol li')
    //循环添加小li，并给小li添加事件，注意这里i是小于ul.children.length+1，下文会讲
    for (let i = 0; i < ul.children.length+1; i++) {
        let li = document.createElement('li');
        li.setAttribute('index',i)//给小li添加下标
        ol.append(li);//添加给下方ol
        li.addEventListener('click',function (){
        //清除小li样式
            for (let j = 0; j < ol.children.length; j++) {
                ol.children[j].className = '';
            }
            //获取上面设置的下标
            let index = this.getAttribute('index');
            //因为我左右按钮按下时，调用的是li的点击事件，当播放到最后一张图片时，下一张应该是第一张，为了呈现效果，所以多添加了一个小li，当此时index为8时，让lis[0]的className为current
            if (index==='8'){
                lis[0].className = 'current'
            }else{
                this.className= 'current';
            }
            //将index赋值给上面定义的num，方便使用
            num = index;
            //上文定义的animate函数，让ul移动
            animate(ul,-index*boxWidth);
            //当每次点击之后，清除定时器，然后重新定义，重新计时
            clearInterval(time);
            time = '';
            time = setInterval(function (){
                right.click();
            },4000)
        })
    }
    //同理，当播放到最后一张图片时，下一张应该是第一张，为了呈现效果，在最后一张图片后面再添加一张图片
    ol.children[0].className = 'current';
    let copy = ul.children[0].cloneNode(true);
    ul.append(copy);
    //给左右按钮添加点击事件
    left.addEventListener('click',function (){
        leftClick--;
        isNum();
        lis[leftClick].click();
    });
    right.addEventListener('click',function (){
        leftClick++;
        isNum();
        lis[leftClick].click();
    });
    //因为从第一张到最后一张，最后一张到第一张需要一个平移的效果，所以封装一个函数判断
    function isNum(){
    //num与上文定义的index绑定，所以就能判断当前是哪张图片显示
        if(num===-1){
        //当图片从第一张来到最后一张，将num重新赋值为最后一张图片，因为添加了一张图片，所以是ul.children.length-2
            num=ul.children.length-2;
            //同理，图片的left值也应该改成添加的图片的值
            ul.style.left = -(num+1)*boxWidth + 'px';
        }else if (num===ul.children.length){
        //当图片从最后一张来到第一张，将num重新赋值为第一张图片
            num = 1;
            ul.style.left = '0px';
        }
    }
    //设置定时器，让图片自动播放
    let time = setInterval(function (){
        right.click();
    },4000)
    //为盒子添加鼠标覆盖事件
    box.addEventListener('mouseover',function (){
    //上文css定义的动画帧函数，淡入效果
        left.style.animation = 'leftIn 0.5s forwards';
        right.style.animation = 'rightIn 0.5s forwards';
        //鼠标覆盖清除定时器
        clearInterval(time);
        time = '';
    })
    box.addEventListener('mouseout',function (){
    //上文css定义的动画帧函数，淡出效果
        left.style.animation = 'leftLeave 0.5s forwards';
        right.style.animation = 'rightLeave 0.5s forwards';
        //鼠标移出添加定时器
        time = setInterval(function (){
            right.click();
        },4000)
    })
</script>

结语

好了，这就是一个完整的类element-ui跑马灯效果，因为刚学js，所以应该会有很多的代码是不需要的，感觉应该不会这么复杂，这是最后的效果图