轮播图动画实现-优快云博客

function $(id) {
    return document.getElementById(id);

}
//封装运动函数
function animate(ele,target) {

    //开始要清除定时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        //先获得该目标位置的偏移量
        var current = ele.offsetLeft;
        //设置每次移动的像素
        var step =730;
        step =  current<target?step:-step; //当前的目标位置小于目标值时，这时步数为正
        current += step; //当前移动的距离
        if(Math.abs(target-current)>Math.abs(step)){
            ele.style.left = current+'px';//当目标值与移动的距离大于步数的距离时，说明还有一段距离

        } else{
            clearInterval(ele.timer);//否则就已经到了，清除定时器
            ele.style.left = target+'px';//就直接让他到目标值
        }

    },20)

}

var oBox = $('box');
var inner = oBox.children[0];
var ulObj = inner.children[0];//
var spanObj = inner.children[1].children; //获取所有的span标签
var imgWidth = inner.offsetWidth;
var foucslr = $('foucslr');
var left = $('left');
var right = $('right');

//为小按钮做点击事件
for(var i=0;i<spanObj.length;i++){
    //在事件触发之前先获取索引
    spanObj[i].setAttribute('index',i);
    spanObj[i].onclick = function () {

        //先去除之前的样式
        for(var i=0;i<spanObj.length;i++){
            //spanObj[0].className = '';
            //这样也是去除样式
            spanObj[i].removeAttribute('class');
        }
        this.className = 'current';
        //获取按钮的索引
        var index = this.getAttribute('index'); //获得当前对象的索引
        animate(ulObj,-index*imgWidth);
        console.log(index);
        console.log(imgWidth*index)

    }
}
//自动轮播
var timer = setInterval(rightMove,1000);
//显示与隐藏左右箭头
oBox.onmouseover = function () {
    foucslr.style.display = 'block';
    clearInterval(timer);//停止自动播放
}
oBox.onmouseout = function () {
    foucslr.style.display = 'none';
    timer = setInterval(rightMove,1000)
};
ulObj.appendChild(ulObj.children[0].cloneNode(true));//把第一张图片进行复制一份
//右边按钮点击
var pic = 0;
right.onclick = rightMove;
//右边移动按钮
    function rightMove() {
        if(pic === ulObj.children.length-1){ //如果图片到了最后一张，就把他置为第一张
            pic = 0;
            ulObj.style.left = 0+'px'; //图片也置为第一张

        }
        pic++;
        animate(ulObj,-imgWidth*pic);

        //在进行控制按钮，当图片进行移动时，按钮这个时候也得跟着动
        if(pic === ulObj.children.length-1){
            //第五个颜色应该去除
            spanObj[spanObj.length-1].className = '';
            //第一个按钮颜色设置上
            spanObj[0].className = 'current'

        }else {  //如果不是最后一张，一并去除样式,然后再添加样式
            //去除所有的按钮样式
            for(var i=0;i<spanObj.length;i++){
                spanObj[i].removeAttribute('class');
            }
            spanObj[pic].className = 'current';
        }
    }
//左边按钮
left.onclick = leftMove;

//左边移动按钮
function leftMove() {
        if(pic === 0){ //如果是第一张图片时，往左移动时马上变为第6张图片
            //图片总共有七张，往左边一点，这个时候出现的时第7张图片，但是索引为6
            pic = 6; //第6张图片
            console.log(pic);
            ulObj.style.left = -pic*imgWidth+'px'
        }
        pic--;
        animate(ulObj,-imgWidth*pic);
        console.log(pic);
        //设置小按钮颜色，先去除按钮样式
        for(var i =0;i<spanObj.length;i++){
            spanObj[i].removeAttribute('class');
        }
        //对当前样式进行设置
        spanObj[pic].className = 'current';
    }

    //自动轮播


//HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完整的轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 730px;
            height: 454px;
            margin: 100px auto;
            position: relative;
        }
        .inner{
            width:730px ;
            height: 454px;
            overflow: hidden;
            position: relative;
        }
        ul{
            list-style-type: none;
        }
        .inner ul{
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .inner li{
            float: left;

        }
        .square{
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .square span{
            width: 16px;
            height: 16px;
            background-color: #ffffff;
            display: inline-block;
            text-align: center;
            line-height: 16px;
            cursor: pointer;

        }
        .square span.current{
            background-color: orange;
            color: #ffffff;
        }
        #foucslr{
            display: none;
        }
        #foucslr span{
            width: 40px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background-color: #000000;
            text-align: center;
            color: #ffffff;
            font-size: 30px;
            cursor: pointer;
            border: 1px solid #cccccc;
            opacity: 0.3;

        }
        #foucslr #right{
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="inner">

        <ul>
            <li><img src="../img1/images/1.jpg" alt="" width="730" height="454"></li>
            <li><img src="../img1/images/2.jpg" alt=""></li>
            <li><img src="../img1/images/3.jpg" alt=""></li>
            <li><img src="../img1/images/4.jpg" alt=""></li>
            <li><img src="../img1/images/5.jpg" alt=""></li>
            <li><img src="../img1/images/6.jpg" alt=""></li>
        </ul>
        <div class="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>

    </div>
    <div id="foucslr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>
<script src="完整的轮播图.js"></script>
</body>
</html>