轮播图实现（手动+自动）

冷不防 2022-12-11 13:33 317阅读 0赞

## html代码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>最简单的轮播效果</title>
        <link rel="stylesheet" type="text/css" href="css/pic.css">
    </head>
    <body>
    
    <div class="box" id="box">
        <div class="inner">
            
            <ul>
                <li><a href="Bootstrap.html"><img src="images/boke/p2.jpg"></a></li>
                <li><a href=""><img src="images/boke/p4.png"></a></li>
                <li><a href=""><img src="images/boke/black.jpg"></a></li>
                <li><a href=""><img src="images/boke/wave.png"></a></li>
                <li><a href=""><img src="images/boke/Dandyweng.jpg"></a></li>
    
            </ul>
    
            <ol class="bar">
    
            </ol>
            
            <div id="arr">
                        <span id="left">
                            <
                        </span>
                <span id="right">
                            >
                        </span>
            </div>
    
        </div>
    </div>
    <script type="text/javascript" src="js/pic.js"></script>
    </body>
    
    </html>

## css代码 ##

* { 
        margin: 0;
        padding: 0
    }
    .box { 
        width: 500px;
        height: 300px;
        border: 1px solid #ccc;
        margin: 100px auto;
        padding: 5px;
    
    }
    .inner{ 
        width: 500px;
        height: 300px;
        position: relative;
        overflow: hidden;
    }
    .inner img{ 
        width: 500px;
        height: 300px;
        vertical-align: top
    }
    ul { 
        width: 1000%;
        position: absolute;
        list-style: none;
        left:0;
        top: 0;
    }
    .inner li{ 
        float: left;
    
    }
    
    ol { 
        position: absolute;
        height: 20px;
        right: 20px;
        bottom: 20px;
        text-align: center;
        padding: 5px;
    }
    ol li{ 
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background-color: #fff;
        margin: 5px;
        cursor: pointer;
    
    }
    ol .current{ 
        background-color: red;
    }
    #arr{ 
        display: none;
    }
    #arr span{ 
        width: 40px;
        height: 40px;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -20px;
        background: #fff;
        cursor: pointer;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-family: '黑体';
        font-size: 30px;
        color: #000;
        opacity: 0.5;
        border: 1px solid #fff;
    }
    #arr #right { 
        right: 5px;
        left: auto;
    }

## js代码 ##

/** * * @param id 传入元素的id * @returns {HTMLElement | null} 返回标签对象，方便获取元素 */
    function my$(id) { 
        return document.getElementById(id);
    }
    
    //获取各元素，方便操作
    var box=my$("box");
    var inner=box.children[0];
    var ulObj=inner.children[0];
    var list=ulObj.children;
    var olObj=inner.children[1];
    var arr=my$("arr");
    var imgWidth=inner.offsetWidth;
    var right=my$("right");
    var pic=0;
    //根据li个数，创建小按钮
    for(var i=0;i<list.length;i++){ 
        var liObj=document.createElement("li");
    
        olObj.appendChild(liObj);
        liObj.innerText=(i+1);
        liObj.setAttribute("index",i);
    
        //为按钮注册mouseover事件
        liObj.onmouseover=function () { 
            //先清除所有按钮的样式
    
            for (var j=0;j<olObj.children.length;j++){ 
                olObj.children[j].removeAttribute("class");
            }
            this.className="current";
            pic=this.getAttribute("index");
            animate(ulObj,-pic*imgWidth);
        }
    }
    //设置ol中第一个li有背景颜色
    olObj.children[0].className = "current";
    //克隆一个ul中第一个li,加入到ul中的最后=====克隆
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
    
    var timeId=setInterval(onmouseclickHandle,3000);
    //左右焦点实现点击切换图片功能
    box.onmouseover=function () { 
        arr.style.display="block";
        clearInterval(timeId);
    };
    box.onmouseout=function () { 
        arr.style.display="none";
        timeId=setInterval(onmouseclickHandle,3000);
    };
    
    right.onclick=onmouseclickHandle;
    function onmouseclickHandle() { 
        //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
        //所以,如果用户再次点击按钮,用户应该看到第二个图片
        if (pic == list.length - 1) { 
            //如何从第6个图,跳转到第一个图
            pic = 0;//先设置pic=0
            ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
        }
        pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
        animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
        //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
        if (pic == list.length - 1) { 
            //第五个按钮颜色干掉
            olObj.children[olObj.children.length - 1].className = "";
            //第一个按钮颜色设置上
            olObj.children[0].className = "current";
        } else { 
            //干掉所有的小按钮的背景颜色
            for (var i = 0; i < olObj.children.length; i++) { 
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current";
        }
    }
    left.onclick=function () { 
        if (pic==0){ 
            pic=list.length-1;
            ulObj.style.left=-pic*imgWidth+"px";
        }
        pic--;
        animate(ulObj,-pic*imgWidth);
        for (var i = 0; i < olObj.children.length; i++) { 
            olObj.children[i].removeAttribute("class");
        }
        //当前的pic索引对应的按钮设置颜色
        olObj.children[pic].className = "current";
    };
    
    //设置任意的一个元素,移动到指定的目标位置
    function animate(element, target) { 
        clearInterval(element.timeId);
        //定时器的id值存储到对象的一个属性中
        element.timeId = setInterval(function () { 
            //获取元素的当前的位置,数字类型
            var current = element.offsetLeft;
            //每次移动的距离
            var step = 10;
            step = current < target ? step : -step;
            //当前移动到位置
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) { 
                element.style.left = current + "px";
            } else { 
                //清理定时器
                clearInterval(element.timeId);
                //直接到达目标
                element.style.left = target + "px";
            }
        }, 10);
    }

这个轮播图的时间设置的是3s自动切换，想修改切换时间，只需要把js代码中的setInterval(onmouseclickHandle,3000);第二个参数修改就可以了，单位是毫秒。有两个地方大概是45行和53行的位置

## 效果展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70_pic_center]  
ps：更新了一下css文件，上面的css文件大部分都是直接修改所有li ol、、、元素，直接用在别的界面上可能会产生影响，以及\*\{margin:0; padding:0;\}这句就可以删除浏览器这些默认值，所以要改成 div.center \* \{margin:0; padding:0;\},这样就只会修改center这个div里面的东西

div.center * { 
        margin: 0;
        padding: 0
    }
    .box { 
        width: 500px;
        height: 300px;
        border: 1px solid #ccc;
        margin: 100px auto;
        padding: 5px;
    
    }
    .inner{ 
        width: 500px;
        height: 300px;
        position: relative;
        overflow: hidden;
    }
    .inner img{ 
        width: 500px;
        height: 300px;
        vertical-align: top
    }
    .inner ul { 
        width: 1000%;
        position: absolute;
        list-style: none;
        left:0;
        top: 0;
    }
    .inner li{ 
        float: left;
    
    }
    
    .inner ol { 
        position: absolute;
        height: 20px;
        right: 20px;
        bottom: 20px;
        text-align: center;
        padding: 5px;
    }
    .inner ol li{ 
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background-color: #fff;
        margin: 5px;
        cursor: pointer;
    
    }
    .inner ol .current{ 
        background-color: red;
    }
    #arr{ 
        display: none;
    }
    #arr span{ 
        width: 40px;
        height: 40px;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -20px;
        background: #fff;
        cursor: pointer;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-family: '黑体';
        font-size: 30px;
        color: #000;
        opacity: 0.5;
        border: 1px solid #fff;
    }
    #arr #right { 
        right: 5px;
        left: auto;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5648ce1df4c74abaa6d5f802fe3c3c04.png