JavaScript实现轮播图

最新推荐文章于 2024-04-09 17:12:14 发布

小胡要努力啊

最新推荐文章于 2024-04-09 17:12:14 发布

阅读量565

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_51512211/article/details/125356103

版权

轮播图实现原理

原理：
1.在一个盒子content里面放一个ul，li浮动float:left，让图片行显示在同行
2.content设置overflow：hide，将超出的ul隐藏
3.通过创建一个定时器（setInterval（function，ms）），每过n毫秒，将该ul的left位置改变，实现视觉上的移动效果。当达到指定位置时，清除定时器

轮播图结构

html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/animate.js"></script>
    <script src="./js/index1.js"></script>
</head>
<body>
    <div class="content">
        <a href="javascript:;" class="fl arrow">&lt;</a>
        <a href="javascript:;" class="fr arrow">&gt;</a>
        <ul class="picList">
            <li><img src="./img/img1.jpeg" alt=""></li>
            <li><img src="./img/img2.jpeg" alt=""></li>
            <li><img src="./img/img3.jpeg" alt=""></li>
            <li><img src="./img/img4.jpeg" alt=""></li>
            <li><img src="./img/img5.jpeg" alt=""></li>
        </ul>
        <ol class="circle">
        </ol>
    </div>
</body>
</html>

css结构

* {
    padding: 0px;
    margin: 0px;
}

.content {
    width: 500px;
    margin: 0 auto;
    height: 300px;
    overflow: hidden;
    position: relative;

}

.content ul {
    position: absolute;
    list-style: none;
    width: 700%;
    height: 300px;

}

.content ul img {
    width: 500px;
    height: 300px;
}

.content ul li {
    float: left;
}



.content a {
    text-decoration: none;
    top: 50%;
    color: black;
    display: none;
    position: absolute;
    background-color: pink;
    border-radius: 15%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.content .fl {
    left: 0;
    z-index: 999;
}

.content .fr {
    right: 0;
    z-index: 999;
}

.content .circle {
    list-style: none;
    position: absolute;
    height: 300px;
    left: 50%;
    transform: translate(-50%, 0);
}

.content .circle li {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    margin-right: 10px;
    float: left;
    margin-top: 285px;
}

.content .circle .discoloration {
    background-color: aqua;
}

重点解释一下JavaScript逻辑部分

window.addEventListener("load", function () {
    //获取元素
    var content = document.querySelector(".content")
    var fr = document.querySelector(".fr")//右边按钮
    var fl = document.querySelector(".fl")//左边按钮
    var ul = document.querySelector("ul")//获取ul
    var ol = document.querySelector("ol")//获取ol
    var img = document.querySelector("img")//图片标签
    var imgWidth = img.offsetWidth//获取图片宽度
    var num = 0;//点击按钮计数第几张图片
    var circle = 0;//点击左右按钮时为了小圆点计数
    //鼠标移入事件
    content.addEventListener("mouseenter", function () {
        //隐藏左右边按钮
        fr.style.display = 'block'
        fl.style.display = 'block'
        clearInterval(timer)//关闭定时器
    })
    //鼠标移出事件
    content.addEventListener("mouseleave", function () {
        //显示左右边按钮
        fr.style.display = 'none'
        fl.style.display = 'none'
        //开启定时器
        timer = setInterval(function(){
            fr.click()
        },2000)
    })

    //根据图片动态生成小圆点
    for (let i = 0; i < ul.children.length; i++) {
        var li = document.createElement("li")//生成li标签
        //为li标签设置自定义属性index，为了点击小圆圈计数
        li.setAttribute("index", i)//设置自定义属性  
        ol.appendChild(li)//放入容器中
        //小圆点点击事件(排他思想，干掉所有人，留下自己)
        li.addEventListener("click", function () {
            for (let j = 0; j < ol.children.length; j++) {
                //干掉所有人
                ol.children[j].className = '';
            }

            var index = this.getAttribute("index")//取出
            num = index//解决点击小圆点后，再点击左右按钮图片错位问题
            circle = index解决点击小圆点后，再点击左右按钮小圆点错位问题
            animate(ul, -index * imgWidth)
            //留下自己
            this.className = "discoloration"//discoloration为css自定义
        })
        ol.children[0].className = 'discoloration'//第一个默认
        animate(ul,)
    }


    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)



    //右边按钮点击事件
    fr.addEventListener("click", function () {
        if (num == ul.children.length - 1) {
            ul.style.left = 0 //到达最后一张图片时
            num = 0
        }
        num++;
        animate(ul, -num * imgWidth)
        circle++;
        if (circle == ol.children.length) {
            circle = 0;//小圆圈到达最后一个时 circle = 0;
        }
        circleChange()//调用函数
    })

    //左边按钮点击事件
    fl.addEventListener("click", function () {
        if (num == 0) {
            num = ul.children.length-1
            ul.style.left = -num*imgWidth+"px"
            
        }
        num--;
        animate(ul, -num * imgWidth)
        circle--;
        if (circle<0) {
            circle = ol.children.length-1;
        }
        circleChange()//调用函数
    })
    //封装小圆圈变化的函数
    function circleChange(){
        for (let i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ""
        }
        ol.children[circle].className = "discoloration"
    }
  //定时器自动播放
   var timer = setInterval(function(){
        fr.click()
    },2000)
})

主要思路：

鼠标移入和移出事件显示和隐藏左右按钮，通过改变属性display：block，display：none。
JavaScript根据图片的数量动态生成下面轮播的小圆点，通过createElement和appendChild放入ol标签中
利用排他思想改变小圆圈的样式。循环所有的小圆圈，然后干掉所有的样式，然后为当前点击的小圆圈加上需要的样式。
点击按钮时调用动画函数（封装好的）代码放在最后面，当轮播到最后一张图片时要跳转到第一张图片，我的做法是：先提前把一张图片克隆出来，放在最后，然后通过改变 ul.style.left =0， num = 0，达到我们跳到第一张的目的。
自动轮播通过var timer = setInterval(function(){ fr.click() },2000)就可以达到我们的目的了

动画函数结构

function animate(obj, target,callback) {
    clearInterval(obj.timer)
     obj.timer = setInterval(() => {
        var step = (target-obj.offsetLeft)/10
        step = step>0 ? Math.ceil(step) : Math.floor(step)  
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer)
            if(callback){
                callback()
            }
        }
        obj.style.left = obj.offsetLeft + step + "px"
    }, 20);
    
}

小胡要努力啊

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript实现轮播图

原理：1.在一个盒子content里面放一个ul，li浮动float:left，让图片行显示在同行2.content设置overflow：hide，将超出的ul隐藏3.通过创建一个定时器（setInterval（function，ms）），每过n毫秒，将该ul的left位置改变，实现视觉上的移动效果。当达到指定位置时，清除定时器html结构css结构重点解释一下JavaScript逻辑部分主要思路：动画函数结构...
复制链接

扫一扫