<div class="p9biao">
    <div class="main">
        <div class="pics" style="left: 0px">
            <img class="pic" src="/images/k2s/page9/a1.png" alt="" />
            <img class="pic" src="/images/k2s/page9/a2.png" alt="" />
            <img class="pic" src="/images/k2s/page9/a3.png" alt="" />
            <img class="pic" src="/images/k2s/page9/a4.png" alt="" />
            <img class="pic" src="/images/k2s/page9/a5.png" alt="" />
        </div>
    </div>
    <a class="iprev s_prev" style="background: url(/images/k2s/page4/prev.png)"></a>
    <a class="inext s_next" style="background: url(/images/k2s/page4/next.png)"></a>
</div>
<style>
.p9biao{width: 300px; height: 300px; background: url(/images/k2s/page9/p9biao.png) no-repeat 50%,50%; position: absolute; top: 50%; margin-top: -50px; right: 22%;
}

.main{position:absolute;height:145px;width:145px;overflow: hidden;left: 72px; top: 49px;}
.pics{position:absolute;top:0;left:0;height:145px;width:725px;}
.pics img{float:left;height:100%;width:20%;}

.page9 .inext, .page9 .iprev{display: block; width: 18px; height: 33px;position: absolute; top:120px;left: -20px; z-index: 99; cursor: pointer;}
.page9 .inext{left: 295px;}
</style>
<script>
var s_next      = document.getElementsByClassName("s_next")[0];
var s_prev      = document.getElementsByClassName("s_prev")[0];
var pics        = document.getElementsByClassName("pics")[0];
var pic         = document.getElementsByClassName("pic");
var width       = 145;

s_next.onclick = function(){
    var left = parseInt(pics.style.left);

    if( -left == (pic.length-1) * width ){
        // pics.style.left = '0px';
    }else{
        animate_next(pics,width);
    }
}
function animate_next(target,offset){
    var left = target.offsetLeft;
    function go(){
        target.style.left = (parseInt(target.style.left) - 5) +"px";
        timer = setTimeout(go,1);
        if(left - parseInt(target.style.left) == offset) clearTimeout(timer);
    }
    go();
}

s_prev.onclick = function(){
    var left = parseInt(pics.style.left);

    if( -left == 0 ){
        // var l = (pic.length-1) * width; 
        // pics.style.left = '-'+l+'px';
    }else{
        animate_prev(pics,width);
    }
}
function animate_prev(target,offset){
    var left = target.offsetLeft;
    function go(){
        target.style.left = (parseInt(target.style.left) + 5) +"px";
        timer1 = setTimeout(go,1);
        if( (left + offset)==parseInt(target.style.left) ) clearTimeout(timer1);
    }
    go();
}
</script>



真诚赞赏，手留余香

微信支付