JS实现大图滚动、无缝连接

来源：互联网发布：马蓉起诉王宝强知乎编辑：程序博客网时间：2024/06/05 07:38

大图滚动2

*{
margin:0;
padding:0;
}
#outer{
width: 1000px;
height: 500px;
margin:100px auto;
overflow: hidden;
position: relative;
}
#inner{
height: 500px;
position: absolute;
top:0px;
/left:0px;/
/transition: all 0.5s;/
}
#inner img{
width: 1000px;
height: 500px;
float:left;
}
#btn_box{
position: absolute;
list-style-type: none;
width: 100%;
left:0;
bottom:30px;
text-align: center;
}
#btn_box li{
display: inline-block;
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #fff;
font-size: 20px;
line-height: 30px;
}
#btn_box li.active{
color:#fff;
background-color:red;
}
#prevBtn,
#nextBtn{
width: 50px;
height: 100px;
position: absolute;
top:200px;
background-color: rgba(0,0,0,.5);
font-size: 30px;
text-align: center;
line-height: 100px;
opacity:0;
transition: all 1.5s;
}
#prevBtn{
left:0px;
}
#nextBtn{
right:0px;
}

        <img src="../img/01.jpg">        <img src="../img/02.jpg">        <img src="../img/03.jpg">        <img src="../img/04.jpg">        <img src="../img/05.jpg">        <img src="../img/06.jpg">        <img src="../img/01.jpg">    </div>    <ul id="btn_box">        <li class="active">1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>    </ul>    <div id="prevBtn">&lt;</div>    <div id="nextBtn">&gt;</div></div><script src="../tween.js"></script><script>    var outer = document.getElementById('outer');    var inner = document.getElementById('inner');    var imgs = inner.getElementsByTagName('img');    var btn_box = document.getElementById('btn_box');    var btns = btn_box.getElementsByTagName('li');    var prevBtn = document.getElementById('prevBtn');    var nextBtn = document.getElementById('nextBtn');    var pieceWidth = imgs[0].offsetWidth;    inner.style.width = imgs.length*pieceWidth + 'px';    var index = 0;    var contorl = true;//定义一个布尔值,用来控制切换的时机(图片在滚动过程中是禁止切换)    var time = null;//图片自动轮播计时器    var time1 = null;//图片滑动计时器    function tab(){        if(index >= imgs.length){            index = 1;            inner.style.left = 0;        }        if(index < 0){            index = btns.length - 1;            inner.style.left = -pieceWidth*(imgs.length-1) +'px';        }        var t = 0;        var maxT = 100;        var start = inner.offsetLeft;        var end = -pieceWidth*index;        var change = end - start;        clearInterval(time1);        time1 = setInterval(function(){            t++;            if(t >= maxT){                clearInterval(time1);                contorl = true;            }            // inner.style.left = change/maxT*t + start + 'px';            inner.style.left = Tween.Quart.easeOut(t,start,change,maxT) + 'px';        },10);        // inner.style.left = -pieceWidth*index + 'px';        for(var i=0; i<btns.length; i++){            btns[i].className = '';        }        if(index == btns.length){            btns[0].className = 'active';        }else{            btns[index].className = 'active';        }    }    function next(){        index++;        tab();    }    function prev(){        index--;        tab();    }    time = setInterval(next,3000);    for(var i=0; i<btns.length; i++){        btns[i].index = i;        btns[i].onclick = function(){            if(contorl){                clearInterval(time);                if(this.index == 0 && index == btns.length){                    index = btns.length;                }else{                    index = this.index;                }                tab();                time = setInterval(next,3000)               }            contorl = false;        }    }    outer.onmouseover = function(){        prevBtn.style.opacity = 1;        nextBtn.style.opacity = 1;    }    outer.onmouseout = function(){        prevBtn.style.opacity = 0;        nextBtn.style.opacity = 0;    }    prevBtn.onclick = function(){        if(contorl){            clearInterval(time);            prev();            time = setInterval(next,3000);        }        contorl = false;    }    nextBtn.onclick = function(){        if(contorl){            clearInterval(time);            next();            time = setInterval(next,3000);        }        contorl = false;    }</script>

0 0