网页轮播图——仿网易云轮播图

最新推荐文章于 2024-06-27 19:41:31 发布

今天星期几呢

最新推荐文章于 2024-06-27 19:41:31 发布

阅读量548

点赞数 1

文章标签： html 前端 javascript 开发语言

本文链接：https://blog.csdn.net/shhghvvh/article/details/128158670

版权

本文介绍了如何制作一个网页轮播图，包括自动切换、鼠标悬停显示隐藏按钮、动态生成小圆点以及点击按钮和小圆点切换图片等功能。详细讲解了HTML、CSS和JavaScript的实现步骤，提供了代码示例。

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

1.结构搭建

1.1实现功能

图片可以自动切换
鼠标经过轮播图模块停止自动播放，显示左右按钮
点击按钮，实现切换效果
鼠标移入小圆圈，可以播放其对应图片
点击左右两侧图片部分区域可以前后前后翻

1.2结构图示

1.3基本框架搭建

1.3.1鼠标经过显示隐藏左右切换按钮

开始我们让左右切换按钮隐藏就好了，只有当鼠标经过轮播图模块的时候显示按钮，鼠标离开继续进行隐藏。

//获取元素
    var leftb = document.querySelector('.left');
    var rightb = document.querySelector('.right');
    var box = document.querySelector('.box');
//左右按钮的显示
    box.addEventListener('mouseenter', function () {
        leftb.style.display = 'block';
        rightb.style.display = 'block';
    })

//左右按钮的隐藏
    box.addEventListener('mouseleave', function () {
        leftb.style.display = 'none';
        rightb.style.display = 'none';
    })

1.3.2动态生成小圆圈

思路分析：

1.小圆圈的个数要跟图片张数一致

2.所以首先先得到ul（imgs）里面图片的张数(图片放入li里面，所以就是li的个数)

3.利用循环动态生成小圆圈(这个小圆圈要放入另一个ul（list）里面)

4.创建节点createElement('li')

5.插入节点list.appendChild(li)

6.小圆圈的排他思想

7.给小圈圈添加类名

8.点击当前小圆圈，就添加colors函数其余的小圆圈就移除这个colors函数

9..我们在刚才生成小圆圈的同时，就可以直接绑定这个点击事件

//动态生成小圆圈，小圈圈模块
    var list = box.querySelector('.list');
    for (var i = 0; i < imgs.children.length; i++) {
        //创建li，加入ul中
        var li = document.createElement('li');
        list.appendChild(li);
        //给小圈圈添加类名
        li.setAttribute('index', i);
        //排他思想，实现点击小圆圈，变色
        li.addEventListener('click', colors);
    }
    //一开始开始改变颜色
    list.children[1].className = 'change';
//变色函数 
    function colors() {
        //把所有的小圆圈变白
        for (var i = 0; i < list.children.length; i++) {
            list.children[i].className = '';
        }
        //给图片对应的小圆圈上色
        var index = this.getAttribute('index');
        list.children[index].className = 'change';
    }
/* 小圆圈改变后的样式 
.list .change {
    background-color: rgb(236, 65, 65);
}*/

1.3.3跳转函数

 function jump() {
        var index = this.getAttribute('index');
        var now = num.indexOf('two');
        //计算经过点与当前点的距离
        var dif = Math.max(index, now) - Math.min(index, now);
        // console.log(dis);
        if (index > now) {
            while (dif--) {
                rightf();
            }
        } else {