轮播图（样式没调好）

最新推荐文章于 2024-11-13 15:29:17 发布

ban__

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量714

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ban__/article/details/123876474

版权

本文详细介绍了如何使用HTML、CSS和JavaScript实现焦点图轮播效果。代码中包括了左右箭头控制、小圆点切换以及自动播放等功能，并展示了相关图片。通过阅读，读者可以了解到焦点图轮播的基本实现原理和操作技巧。

摘要由CSDN通过智能技术生成

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;  
            z-index:1
        }
        li{
            float: left;
            list-style: none;
        }
        img {
            display: inline-block;
        }
        .focus{
            position: relative;
            width: 721px;
            height: 455px;
            margin: 200px auto;
            overflow: hidden;
            background-color: aquamarine;
        }
        .arrow-left,
        .arrow-right {
            position: absolute;
            /* 鼠标经过轮播图，箭头才显现出来 */
            display: none;
            font-size: 30px;
            top:225px;
            background-color:red;
        }
        .arrow-right {
            left: 700px;
        }
        ul {
            position: absolute;
            width:500% ;
           
        }
        .circle{
            position: absolute;
            top:420px;
            left:300px
        }
        .circle li{ 
            background-color: aliceblue;
            width: 10px;
            height: 10px;
            margin: 10px;
        } 
        .circle .current {
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="focus">
        <a href="javascript:;" class="arrow-left">></a>
        <a href="javascript:;" class="arrow-right"><</a>
        <ul>
            <li><a href=""><img src="./img/focus.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/focus1.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/focus2.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/focus3.jpg" alt=""></a></li>
        </ul>
        <ol class="circle"></ol>
    </div>
    <script>
        var focus = document.querySelector(".focus");
        var arrow_left = document.querySelector(".arrow-left");
        var arrow_right = document.querySelector(".arrow-right");
        var circle = document.querySelector(".circle");
        var ul = document.querySelector('ul');
        // 获取到焦点图的宽度
        var focusWidth = focus.offsetWidth;
        // 记录左右按钮点击次数，获得移动距离
        var num = 0;
        var arr_target;
        // 记录点击右侧按钮，小圆圈的样式变化
        var ring = 0;
        // 3.动画函数--
        var div = document.querySelector('div');
        function animate(obj,target,callback){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
            // 缓动动画--step要避免小数,因此要取整
            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';
        },15)
        }
        // 1.鼠标经过轮播图，箭头的变化
        focus.addEventListener('mouseenter',function(){
            arrow_left.style.display='block'
            arrow_right.style.display='block'
            // 6.自动播放--离开焦点图就清除定时器变量
            clearInterval(timer);
            timer=null;
        })
        focus.addEventListener('mouseleave',function(){
            arrow_left.style.display='none'
            arrow_right.style.display='none'
            // 6.自动播放--离开焦点图就自动播放
            timer = setInterval(function(){
            arrow_right.click()
        },1500)
        })
        // 2.根据图片数量动态生成圆圈数量
        for(var i = 0;i<ul.children.length;i++ ){
            // 创建新节点<li>
            var newLi = document.createElement('li');
            // 插入节点到指定节点处
            circle.appendChild(newLi);
            circle.children[i].setAttribute('index',i);
            // 点击事件--样式变化--排他思想
            circle.children[0].className='current';
            newLi.addEventListener('click',function(){
                for(var i = 0;i<circle.children.length;i++){
                    circle.children[i].className='';
                }
                num = this.getAttribute('index');
                ring = this.getAttribute('index');
                this.className='current';
                var target = focusWidth*this.getAttribute('index');
                animate(ul,-target);
            })
        }

        // 鼠标移动到小圆圈上是小手的样式
        circle.addEventListener('mouseover',function(){
            this.style.cursor='pointer'
        })
        // 3.左右侧按钮播放图片
        arrow_right.addEventListener('click',function(){
            // 4.点击右侧到最后一张，跳回到第一张
            if(num == ul.children.length - 1){
                ul.style.left = 0;
                num = 0;
            }
            num++;
            arr_target= num*focusWidth
            animate(ul,-arr_target);
            // 5.点击右侧按钮焦点图移动，同时小圆圈的样式也会变化
            // 定义一个全局变量--ring---控制点击后，小圆圈的样式变化
            ring++;
            for(var i = 0;i< circle.children.length;i++){
                circle.children[i].className=''
            }
            if(ring>3){
                ring=0;
            }
            circle.children[ring].className='current'
        })
        arrow_left.addEventListener('click',function(){
            if(num ==0){
                //ul.style.left = 3*focusWidth ;
                num = 4;
            }
            num--;
            arr_target = num*focusWidth
            animate(ul,-arr_target)
            ring--;
            for(var i = 0;i< circle.children.length;i++){
                circle.children[i].className=''
            }
            if(ring<0){
                ring=3;
            }
            circle.children[ring].className='current'
        })
        // 4.深克隆第一张焦点图
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first)

        // 6.自动播放轮播图
        var timer = setInterval(function(){
            arrow_right.click()
        },1500)
       


    </script>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/155428b4ecb94455bebf58bd0bc47cc9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYmFuX18=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/fc4091053321406bb682a77ac9d12b7a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYmFuX18=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/cf2f5926821a4b84b66a90b9dcdc0caf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYmFuX18=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/b913924169e94a5496d2f20abc47fc46.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYmFuX18=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)