Javascript图片轮播

Posted 2020-08-21 check it out

原文链接：

http://www.imooc.com/article/7393

编辑html代码：

<div id="wrap"><!--图片展示区-->
    <div id="inner" class="clear"><!--所有图片并排的块-->
        <a href="#"><img src="img/sw1.png" alt="图片已失效"/></a>
        <a href="#"><img src="img/sw2.png" alt="图片已失效"/></a>
        <a href="#"><img src="img/sw3.png" alt="图片已失效"/></a>
        <a href="#"><img src="img/sw4.png" alt="图片已失效"/></a>
        <a href="#"><img src="img/sw5.png" alt="图片已失效"/></a>
        <a href="#"><img src="img/sw6.png" alt="图片已失效"/></a>
        <a href="#"><img src="img/sw7.png" alt="图片已失效"/></a>
        <a href="#"><img src="img/sw8.png" alt="图片已失效"/></a>
        <a href="#"><img src="img/sw1.png" alt="图片已失效"/></a>
    </div>
    <div id="pagination" class="pagination"><!--页面数字按钮区域-->
        <span class="selected">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
    </div>
    <div id="left" class="arrow">
        <<<
    </div>
    <div id="right" class="arrow">
        >>>
    </div>
</div><!--wrap end-->

定义样式：

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        border: 0;
    }
    #wrap{/*整个轮播区域只会显示一张图片大小的空间，其余图片隐藏*/
        width: 720px;/*图片宽度*/
        height: 322px;/*图片高度*/
        margin: 0 auto;/*水平居中*/
        position: relative;
        background: lightpink;
        overflow: hidden;
    }
    .clear{/*兼容IE*/
        zoom: 1;
    }
    .clear:after{
        visibility: none;
        content: "";
        display: block;
        clear: both;
        height: 0;/*这是为什么？*/
    }
    #inner{
        width: 1000%;/*这是为什么？*/
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    #inner img{
        width: 10%;
        float: left;
    }
    .pagination{/*页码的样式和摆放*/
        width: 100%;
        position: absolute;
        bottom: 10px;
        text-align: center;
    }
    .pagination span{
        padding: 5px 8px;
        background: green;
        color: aliceblue;
        border-radius: 50%;/*设置数字按钮边框圆角*/
        cursor: pointer;
    }
    .pagination .selected{/*第一个页码的数字按钮样式*/
        background: blue;
        color: chartreuse;
    }
    .arrow{/*箭头样式*/
        position: absolute;
        top: 0;
        width: 35px;
        height: 322px;/*图片高度*/
        line-height: 322px;
        text-align: center;
        color: black;
        cursor: pointer;
    }
    #right{
        right: 0;
    }
    .arrow:hover{
        background: rgba(0,0,0,0.5);
    }
</style>

javascript代码：

<script type="text/javascript">
    var wrap = document.getElementById("wrap");//获取要轮播的DIV
    var inner = document.getElementById("inner");//获取轮播图并排的块
    //获取pagination的子字节数字按钮
    var spanList = document.getElementById("pagination").getElementsByTagName("span");
    var left = document.getElementById("left");//获取往左箭头
    var right = document.getElementById("right");//获取往右箭头
    
    var clickFlag = true;//防止左右按钮的连续操作
    var motive;//用来设置自动往左滑动的计时器
    var index = 0;//记录每次滑动图片的下角标
    var Distance = wrap.offsetWidth;//获取展示区的宽度（图片宽度）
    function AutoGo(){//定义图片滑动的函数
        var start = inner.offsetLeft;//获取移动块当前left的坐标
        var end = index * Distance * (-1);//获取移动块结束后的坐标（下角标*图片宽度*每次向左移动的一个宽度）
        //比如当移动第6张图片时，图片下角标为数值5乘以图片宽度322px就是图6往左偏移的值 5*322=1610px
        
        var change = end - start;//偏移量（x轴结束后的坐标减去当前left的坐标等于往左偏移的像素数）
        var motiver;//给图片添加轮播效果的间隔型定时器
        var miniT = 0;//最短时间0毫秒
        var maxT = 30;//最长时间，每30毫秒让块往左移动
        clear();//先将按钮状态清除，再让对应的按钮改变状态
        if(index == spanList.length){//if语句判断下角标是否等同于数字按钮的长度
            spanList[0].className = "selected";//className返回元素的class属性，子节点下角标为0时返回selected
        }else{
            spanList[index].className = "selected";
        }
        clearInterval(motiver);//在开启定时器之前先将之前的清除
        motiver = setInterval(function(){
            miniT++;
            if(miniT >= maxT){
                clearInterval(motiver);//当图片到达终点时清除间隔型定时器
                clickFlag = true;//当图片到达终点时才能点击方向按钮切换图片
            }
            //每隔多少毫秒（对应下列括号内的数值）往左偏移  = 偏移量/最长时间*最短时间 + X轴往左滑动的像素数
            //比如第4张图片 = 4*322/0 + 4*322px
            inner.style.left = change / maxT * miniT + start + "px";
            //如果满足下角标等同于子节点长度，以及最短时间大于等于最长时间的条件时，
            if(index == spanList.length && miniT >= maxT){
                inner.style.left = 0;
                //当图片到达最后一张时让它瞬间切换回第一张，由于都是用的都是第一张图片所以不会影响效果
                index = 0;
            }
        },20);
    }
    //定义图片往右滑动的函数
    function forward(){
        index++;
        if(index > spanList.length){//当图片下角标到达最后一张时记录滑动图片的下角标为0
            index = 0;
        }
        AutoGo();
    }
    //定义图片往左滑动函数
    function backward(){
        index--;
        //当图片下角标到达第一张时，让它返回到倒数第二张，left的值要变为最后一张时才不会影响效果
        if(index < 0){
            index = spanList.length - 1;
            inner.style.left = (index + 1) * Distance * (-1) + "px";
        }
        AutoGo();
    }
    //开启图片自动向右滑动的计时器，间隔多少毫秒切换一次图片，即一张图片停留时间为多少毫秒
    motive = setInterval(forward,2000);
    //设置鼠标悬停时清除定时器，轮播暂停
    wrap.onmouseover = function(){
        clearInterval(motive);
    }
    wrap.onmouseout = function(){
        motive = setInterval(forward,2000);
    }
    //遍历每个数字按钮让其切换到对应的图片
    for(var i=0;i<spanList.length;i++){
        spanList[i].onclick=function(){
            //innerText用来定义数字按钮输出的文本
            index = this.innerText - 1;//图片点击后下角标可以返回对应的图片，例如第4张是[3] = this.innerText -1;
            AutoGo();
        }
    }
    left.onclick=function(){
        if(clickFlag){
            backward();
        }
        clickFlag = false;
    }
    right.onclick=function(){
        if(clickFlag){
            forward();
        }
        clickFlag = false;
    }
    //清除所有页面按钮状态颜色，只有当图片轮播时才能改变对应的按钮效果
    function clear(){
        for(var i=0;i < spanList.length;i++){
            spanList[i].className = "";
        }
    }
</script>