【无缝轮播图】

pink学生

已于 2022-09-18 16:09:47 修改

阅读量111

点赞数

分类专栏：代码参考文章标签： html javascript 前端

于 2022-09-18 15:59:23 首次发布

本文链接：https://blog.csdn.net/weixin_64356463/article/details/126918782

版权

代码参考专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #main{
            width: 750px;
            height: 360px;
            border: 1px solid #f00;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        #view{
            width: 4500px;
            height: 360px;
            position: absolute;
            
        }
        #view li{
            float: left;
        }
        #circle-list{
            width: 95px;
            height: 13px;
            padding: 5px;
            background-color: rgba(0,0,0,0.5);
            border-radius: 13px;
            position: absolute;
            left: 50%;
            bottom: 20px;
            margin-left: -47.5px;
        }
        #circle-list span{
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background-color: #fff;
            display: block;
            float: left;
            cursor: pointer;
            margin: 0px 3px;
        }
        #circle-list .active{
            background-color: orange;
        }
        #prev{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 50px;
            color: rgba(0,0,0,0.5);
            font-weight: bold;
            background-color: yellow;
            position: absolute;
            cursor: pointer;
            left: 0px;
            top:45%;
            display: none;
            
        }
        #next{
            width: 50px;
            height: 50px;
            cursor: pointer;
            line-height: 50px;
            text-align: center;
            font-size: 50px;
            color: rgba(0,0,0,0.5);
            font-weight: bold;
            background-color: yellow;
            position: absolute;
            right: 0px;
            top: 45%;
            display: none;
        }
    </style>
</head>
<body>
    <div id="main">
        <ul id="view">
            <li><img src="img/pic1.jpg" alt=""></li>
            <li><img src="img/pic2.jpg" alt=""></li>
            <li><img src="img/pic3.jpg" alt=""></li>
            <li><img src="img/pic4.jpg" alt=""></li>
            <li><img src="img/pic5.jpg" alt=""></li>
            <!-- 在ul后面添加最后子元素，和第一个子元素一样 -->
            <li><img src="img/pic1.jpg" alt=""></li>
        </ul>
        <div id="circle-list">
            <span class="circle active"></span>
            <span class="circle"></span>
            <span class="circle"></span>
            <span class="circle"></span>
            <span class="circle"></span>
        </div>
        <div id="prev">&lt;</div>
        <div id="next">&gt;</div>
    </div>
    <script>
        //先封装一个动画
        function moveAnimation2(ele,target){
        clearInterval(ele.interId)
        ele.interId = setInterval(function(){
        if(ele.offsetLeft == target){
            clearInterval(ele.interId)
        }else{
            var slowStep = (target - ele.offsetLeft) / 10;
        
            // 每次的步长求整数值
            slowStep = slowStep > 0 ?  Math.ceil(slowStep) : Math.floor(slowStep);
            ele.style.left = ele.offsetLeft + slowStep + 'px';
        }
    },50)
}
</script>
    <script>
        // 获取元素
        var view = document.getElementById('view');
        var main = document.getElementById('main');
        var circles = document.getElementsByClassName('circle');

        var prev = document.getElementById('prev');
        var next = document.getElementById('next');

        // 封装排它思想
        function backCircle(ele){
            for(var j=0;j<ele.length;j++){
                ele[j].className = 'circle';
            }
        }
        // 1、鼠标移入图片，显示左右按钮,清除定时器暂停图片切换
        main.onmouseover = function(){
            prev.style.display = 'block';
            next.style.display = 'block';

            clearInterval(view.autoId);
        }
        // 2、鼠标离开图片，消失左右按钮，调用自动切换图片函数
        main.onmouseout = function(){
            prev.style.display = 'none';
            next.style.display = 'none';
            autoPlay();
        }
        // 控制圆点
        var flag = 0;
        // 控制图片的
        var count = 0;
        // 3、点击下一个按钮，ul移动，小圆点跟着图片移动
        next.onclick = function(){
            flag++;
            count++;
            if(flag == circles.length){
                flag = 0;
            }
            if(count == view.children.length){
                view.style.left = 0;
                count = 1;
            }
            // 先排它
            backCircle(circles);
            // 给小圆点添加颜色
            circles[flag].className = 'circle active';
            // 求出每次移动的距离
            var target = count * (-750);
            // 走动画
            moveAnimation2(view,target);
        }
        // 4、点击上一个按钮，ul移动，小圆点跟着图片移动
        prev.onclick = function(){
            // 是否是第一张图片
            if(count == 0){
                count = view.children.length - 1;
                view.style.left = count * (-750) + 'px';
            }
            count--;
            flag--;
            if(flag < 0 ){
                flag = circles.length - 1;
            }
            // 先排它
            backCircle(circles);
            // 给小圆点添加颜色
            circles[flag].className = 'circle active';
            // 求出每次移动的距离
            var target = count * (-750);
            // 走动画
            moveAnimation2(view,target);
        }
        // 5、自动轮播，调用右边按钮事件就可以了
        function autoPlay(){
            view.autoId = setInterval(function(){
                next.onclick();
            },2000)
        }   
        // 执行函数 
        autoPlay()
        // 6、添加焦点轮播
        // 循环给小圆点绑定单击事件
        for(var i=0;i<circles.length;i++){
            // 转存一下i的值
            circles[i].index = i;
            // 绑定事件、
            circles[i].onclick = function(){
                // 设置同步值，让我们图片和圆点切换保持一致
                count = this.index;
                flag = this.index;
                // 先排它
                backCircle(circles);
                 // 给小圆点添加颜色
                this.className = 'circle active';
                // 移动距离
                var targer = this.index * (-750);
                // 走动画
                moveAnimation2(view,targer);
            }
        }
    </script>
</body>
</html>