碎碎念ZWS

最近写的一个原生JavaScript幻灯片，动效是由js控制。

HTML代码

<div class="slide-wrap">
    <ul id="slide-item">
    	<li>
			<p class="img"><img src=""></p>
			<div>
				<label></label>
				<p></p>
			</div>
		</li>
		<li>
			<p class="img"><img src=""></p>
			<div>
				<label></label>
				<p></p>
			</div>
		</li>
		<li>
			<p class="img"><img src=""></p>
			<div>
				<label></label>
				<p></p>
			</div>
		</li>
    </ul>
    <a href="javascript:" class="arrow left"></a>
    <a href="javascript:" class="arrow right"></a>
</div>

js代码

var arrowL = getClass('arrow left', 'a')[0];
var arrowR = getClass('arrow right', 'a')[0];
var c_obj = document.getElementById('slide-item');
var items = c_obj.getElementsByTagName('li');
var obj_w = c_obj.parentNode.offsetWidth;
var current = 0,
    next,
    prev,
    curItem,
    preItem,
    nexItem;
//init
var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(f) { setTimeout(f, 30) }
items[0].className = 'current';
items[1].className = 'next';
var clickLeft = function() {
    if (current < 0) {
        current = items.length - 1;
    }
    prev = (current == 0) ? items.length - 1 : current - 1;
    curItem = items[current];
    preItem = items[prev];
    preItem.className = 'prev';
    preItem.style.left = -1200 + 'px';
    var slide = function() {
        var left = curItem.style.left;
        left = left ? parseFloat(left) : 0;
        var speed = parseFloat(obj_w - left) / 10;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        left = Math.min(left + speed, 1200);
        curItem.style.left = left + 'px';
        var prev_left = preItem.style.left;
        prev_left = prev_left ? parseFloat(prev_left) : 0;
        var p_speed = parseFloat(0 - prev_left) / 10;
        p_speed = p_speed > 0 ? Math.ceil(p_speed) : Math.floor(p_speed);
        prev_left = Math.min(prev_left + p_speed, 1200);
        preItem.style.left = prev_left + 'px';
        if (left < obj_w) {
            animate(slide);
            arrowL.onclick = function(){return;}
            arrowR.onclick = function(){return;}
        }
        if (left >= obj_w) {
            if (items.length > 2) {
                for (var j = 0; j < items.length; j++) {
                    items[j].removeAttribute('class');
                }
                if (prev == 0) {
                    items[items.length - 1].className = 'prev';
                } else {
                    items[prev - 1].className = 'prev';
                }
            }
            curItem.className = 'next';
            preItem.className = 'current';
            curItem.removeAttribute('style');
            preItem.removeAttribute('style');
            arrowL.onclick = clickLeft;
            arrowR.onclick = clickRight;
        }
    }
    animate(slide);
    current--;
}
var clickRight = function() {
    if (current > items.length - 1) {
        current = 0;
    }
    next = (current > items.length - 2) ? 0 : current + 1;
    curItem = items[current];
    nexItem = items[next];
    nexItem.className = 'next';
    nexItem.style.left = 1200 + 'px';
    var slideR = function() {
        var left = curItem.style.left;
        left = left ? parseFloat(left) : 0;
        var speed = parseFloat(obj_w + left) / 10;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        left = Math.max(left - speed, -1200);
        curItem.style.left = left + 'px';
        var next_left = nexItem.style.left;
        next_left = next_left ? parseFloat(next_left) : 0;
        var p_speed = parseFloat(0 - next_left) / 10;
        p_speed = p_speed > 0 ? Math.ceil(p_speed) : Math.floor(p_speed);
        next_left = Math.max(next_left + p_speed, 0);
        nexItem.style.left = next_left + 'px';
        if (left > -1200) {
            animate(slideR);
            arrowL.onclick = function(){return;}
            arrowR.onclick = function(){return;}
        }
        if (left  2) {
                for (var j = 0; j < items.length; j++) {
                    items[j].removeAttribute('class');
                }
                if (next > items.length-2) {
                    items[0].className = 'next';
                } else {
                    items[next+1].className = 'next';
                }
            }
            curItem.className = 'prev';
            nexItem.className = 'current';
            curItem.removeAttribute('style');
            nexItem.removeAttribute('style');
            arrowR.onclick = clickRight;
            arrowL.onclick = clickLeft;
        }
    }
    animate(slideR);
    current++;
}
arrowL.onclick = clickLeft;
arrowR.onclick = clickRight;

css

.slide-wrap {
    width: 1200px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: #fff;
    .arrow {
        position: absolute;
        z-index: 99;
        top: 0;
        bottom: 0;
        display: block;
        margin: auto;
        width: 30px;
        height: 60px;
        cursor: pointer;
    }
    .left {
        left: 0;
    }
    .right {
        right: 0;
    }
    ul {
        position: relative;
        height: 200px;
    }
    li {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -9;
        height: 200px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        animation: all 0.3s ease;
        -webkit-animation: all 0.3s ease;
        &.current {
            left: 0;
            z-index: 80;
        }
        &.prev {
            left: -1200px;
            z-index: 86;
        }
        &.next {
            left: 1200px;
            z-index: 86;
        }
        div {
            display: inline-block;
            vertical-align: middle;
            height: 200px;
            width: 650px;
            word-break: break-all;
        }
    }
    .img {
        display: inline-block;
        vertical-align: middle;
        width: 280px;
        margin-right: 50px;
        img {
            display: block;
            margin: auto;
            max-width: 280px;
            width: 100%;
            height: auto;
        }
    }
}