js轮播图

最新推荐文章于 2022-07-06 20:58:10 发布

胖咪

最新推荐文章于 2022-07-06 20:58:10 发布

阅读量183

点赞数 2

文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/weixin_48868702/article/details/115587310

版权

本人初学者，本着用博客来记载自己的学习前端知识的路程，要是觉得哪里不正确欢迎大神指点指点
回到正题：
轮播图的效果

在鼠标进入时能够把左右两边的箭头显示出来，在离开时隐藏
在点击小圆圈时能够跳到对应的图片上
在点击在框内的左右箭头能进行图片的切换效果
定时轮播图片

轮播图的原理

绿色的是父盒子，黄色和绿色的是通过绝对定位设置的子盒子，子盒子（ul）上有多个li放上图片
根据相应的触发事件，相应改变子盒子left的值，达到切换图片的效果

html和css样式

<body>
    <div class="focus">
        <a href="javascript:;" class="arrow_left"></a>
        <a href="javascript:;" class="arrow_right"></a>
        <ol>


        </ol>

        <ul class="img_move">
            <li><a href="#"><img src="upload/focus.jpg" alt=""></a></li>
            <li><a href="#"><img src="upload/focus1.jpg" alt=""></a></li>
            <li><a href="#"><img src="upload/focus2.jpg" alt=""></a></li>
            <li><a href="#"><img src="upload/focus3.jpg" alt=""></a></li>
        </ul>
    </div>

</body>

.arrow_left,
.arrow_right {
    position: absolute;
    display:none;
    z-index: 99;

    top: 50%;
    width: 22px;
    height: 32px;
    background: rgba(0, 0, 0, 0.3);

    transform: translateY(-50%);

}

.arrow_left {
    left: 0;
    background-image: url(img/arrow-prev.png);
}

.arrow_right {
    right: 0;
    background-image: url(img/arrow-next.png);
}

.focus ol {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15px;
    height: 12px;
    z-index: 999;
    
    border-radius: 6px;
}

.focus ol li {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    
    background: rgba(0, 0, 0, 0.3);

    margin-right: 5px;
}

.style_fff {
    background-color: #fff;
}


.focus .img_move {
    position: absolute;
    left: 0px;
    
    width: 600%;

}

.focus .img_move li {
    float: left;
    
}
.focus .img_move li a img{
    width: 100%;
    height: 100%;
    

}

js部分
1.先定义一个animate函数，用来实现动画的效果，方便后面的调用

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        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();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

2.、主要实现代码

	首先获得要用到的对象
	var focus = document.querySelector('.focus');
    var arrow_left = document.querySelector('.arrow_left');
    var arrow_right = document.querySelector('.arrow_right');
    var img_move = document.querySelector('.img_move');
    var ol = document.querySelector('.focus ol');


    // 获得docus的看宽度
    var Width = focus.offsetWidth;
    console.log('focus的宽度' + Width);


    // 当鼠标在focus里时左右箭头划出 
    focus.addEventListener('mouseenter', function () {
        arrow_left.style.display = 'block';
        arrow_right.style.display = 'block';
        //在鼠标移入时，将定时器清除
        clearInterval(t_move);
        t_move = null;

    })
    focus.addEventListener('mouseleave', function () {
        arrow_left.style.display = 'none';
        arrow_right.style.display = 'none';
         //在鼠标移出时，将定时器开启
        t_move = setInterval(function () {
            arrow_right.click();
        }, 2000);
    })

    // 根据图片的数量自动生成小圆点，并添加index属性，方便后面跳到对应的图片上
    for (var i = 0; i < img_move.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);

        // li.className = '.style_fff';

        ol.appendChild(li);
        ol.children[0].style.background = '#fff';
        //给小圆点添加点击事件，在点击时被点击的小圆颜色变红
        li.addEventListener('click', function () {
        //将所有的小圆点的颜色清除，再给点到的小圆变颜色
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].style.background = 'rgba(0, 0, 0, 0.3)';

            }
            this.style.backgroundColor = '#fff'
            var index = this.getAttribute('index');
            console.log(index);
            animate(img_move, -index * Width);

        })


    }
    //克隆第一张图片放到最后，不会再到达尽头时图片切换不自然
    var first_img = img_move.children[0].cloneNode(true);
    img_move.appendChild(first_img);



    // 点击左右箭头切换效果
    var count = 0;
    var circl = 0;
    arrow_left.addEventListener('click', function () {

        if (count == 0) {
            count = img_move.children.length - 1;
            console.log(img_move.children.length);
            img_move.style.left = -count * Width + 'px';
        }
        count--;


        animate(img_move, -count * Width, function () {
            flag = true;

        })
        //设置在点击箭头后，图片切换，相应的小圆点的颜色发生改变
        circl--;
        circl = circl < 0 ? ol.children.length - 1 : circl;
        coo();




    })

    arrow_right.addEventListener('click', function () {

        if (count == img_move.children.length - 1) {
            count = 0;
            img_move.style.left = -count * Width + 'px';
        }
        count++;
        animate(img_move, -count * Width, function () {

        });
        circl++;
        circl = circl > ol.children.length - 1 ? 0 : circl;
        coo();
    })


    // 延时切换图片
    var t_move = setInterval(function () {
        arrow_right.click();
    }, 2000);

    function coo() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].style.background = 'rgba(0, 0, 0, 0.3)';

        }
        ol.children[circl].style.background = '#fff';

    }

在这里插入图片描述

胖咪

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
js轮播图

本人初学者，本着用博客来记载自己的学习前端知识的路程，要是觉得哪里不正确欢迎大神指点指点回到正题：轮播图的效果在鼠标进入时能够把左右两边的箭头显示出来，在离开时隐藏在点击小圆圈时能够跳到对应的图片上在点击在框内的左右箭头能进行图片的切换效果定时轮播图片轮播图的原理绿色的是父盒子，黄色和绿色的是通过绝对定位设置的子盒子，子盒子（ul）上有多个li放上图片根据相应的触发事件，相应改变子盒子left的值，达到切换图片的效果html和css样式<body> <d
复制链接

扫一扫