js实现轮播图功能

素颜马尾好姑娘i 2021-09-23 06:10 413阅读 0赞

代码：

<!DOCTYPE html>  
<html lang="en">

<head>  
    <meta charset="UTF-8">  
    <title>路人女主无缝轮播图片</title>  
</head>

<body>  
    <div class="box" id="box">  
        <ul>  
            <li><img src="images/xia1.png"></li>  
            <li><img src="images/xia2.png"></li>  
            <li><img src="images/xia3.png"></li>  
            <li><img src="images/xia4.png"></li>  
            <li><img src="images/xia5.png"></li>  
            <li><img src="images/xia6.png"></li>  
            <li><img src="images/xia7.png"></li>  
            <li><img src="images/xia8.png"></li>  
        </ul>  
        <ol>  
        </ol>  
    </div>  
    <div class="content">  
        <p>1.鼠标离开图片开始自动轮播，鼠标放在图片上停止自动轮播。</p>  
        <p>2.通过小圆圈可以控制要显示的图片</p>  
    </div>  
</body>

</html>

.box \{  
    width: 1280px;  
    height: 720px;  
    margin: 50px auto;  
    position: relative;  
    overflow: hidden;  
\}

.box ul \{  
    width: 900%;  
    position: absolute;  
    top: 0;  
    left: 0;  
\}

.box li \{  
    list-style: none;  
    vertical-align: top;  
    float: left;  
\}

.box ol \{  
    list-style: none;  
    position: absolute;  
    bottom: 10px;  
    left: 50%;  
    margin-left: 0;  
\}

.box ol li \{  
    width: 30px;  
    height: 30px;  
    border: 1px solid \#ccc;  
    border-radius: 50%;  
    background-color: \#fff;  
    line-height: 30px;  
    text-align: center;  
    margin-left: 10px;  
    cursor: pointer;  
\}

.box ol li.current \{  
    background-color: \#ff0;  
\}  
.content \{  
    width: 1280px;  
    margin: 0 auto;  
    text-align: center;  
\}  
</style>  
<script type="text/javascript">  
window.onload = function() \{  
    var box = document.getElementById("box");  
    var ul = box.children\[0\];  
    var ol = box.children\[1\];  
    var ulLis = ul.children;  
    //1.封装 轮播函数  
    function animate(obj, target) \{ // 第一个参数 要运动的盒子 第二个参数 要位移的距离  
        clearInterval(obj.timer); //运行计时器 先停止计时器  
        var speed = obj.offsetLeft > target ? -1280 : 1280; //计算 步长 与 位移方向  
        obj.timer = setInterval(function() \{ // obj.timer 为全局变量  
            if (obj.offsetLeft == target) \{  
                clearInterval(obj.timer);  
            \} else \{  
                obj.style.left = obj.offsetLeft + speed + "px";  
            \}  
        \}, 30)  
    \}  
    //封装 轮播函数

//2.复制第一张图做无缝轮播 克隆节点 lis\[0\].cloneNode(true);  true 深克隆  
    ul.appendChild(ulLis\[0\].cloneNode(true)); // 向父节点追加子节点 复制完成  
    //3.动态生成ol里的li  
    for (i = 0; i < ulLis.length-1; i++) \{   //利用for循环来添加li 因为之前克隆了一个节点 所以长度减一  
        var li = document.createElement("li");  //创建节点 li  
        li.innerHTML = i + 1;                  //创建节点li 的内容  
        ol.appendChild(li);                    // ol 插入 li  
    \}  
    ol.style.marginLeft = -ol.offsetWidth/2 + "px";  //ol动态居中  
    //4.ol li的动画部分  
    var olLis = ol.children;  
    olLis\[0\].className = "current";         
    for (var i = 0; i < olLis.length; i++) \{  
        olLis\[i\].index = i;    // 赋予索引号  
        olLis\[i\].onmouseover = function () \{      
            for (var j = 0; j < olLis.length; j++) \{  //清除所以li的class  
                olLis\[j\].className = "";  
            \}  
            this.className = "current";  //利用this 修改调用函数的li的类名  
            animate(ul,-this.index\*box.offsetWidth);//利用this.index调用索引号  
            key = square = this.index; //鼠标经过ol li时 统一控制轮播的值  
        \}  
    \}  
    //5.自动轮播部分 autoplay 图片和ol li一起自动轮播  
    var timer = null; //全局定义计时器  
    var key = 0; // 利用key值控制自动轮播 key=位移了几张图片  
    var square = 0; //利用square控制ol li自动轮播   
    timer = setInterval(autoplay,2000); //定义autoplay函数 方便调用  
    //5.1图片自动轮播部分  
    function autoplay () \{  
        key++;                   //key=ulLis.length-1时，已经轮播到最后一张图即为第一张图此时square = 0  
        if (key>=ulLis.length) \{ //key=ulLis.length时，  
            key = 1;             //应该从第一张图轮播到第二张图所以 令 key = 1  
            ul.style.left = 0;   //图片从最右拉到最左  
        \}  
        animate(ul,-key\*box.offsetWidth);  
    //5.2ol li自动轮播部分  
        square++;  
        square = square >= olLis.length ? 0:square;  
        for (var i = 0; i < olLis.length; i++) \{  
            olLis\[i\].className = ""  
        \}  
        olLis\[square\].className = "current";  
    \}  
    //6.鼠标经过box盒子时，停止自动轮班。鼠标离开时开启自动轮播  
    box.onmouseover = function () \{  
        clearInterval(timer);      
    \}  
    box.onmouseout = function () \{  
        timer = setInterval(autoplay,2000); //调用autoplay函数  
    \}  
\}     
</script>

运行效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW8yOTczMjg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW8yOTczMjg_size_16_color_FFFFFF_t_70]: /images/20210923/3dc61747e5f346b98d56de64bafc99ce.png