原生js实现小米轮播图

最新推荐文章于 2023-08-03 11:27:17 发布

百事可口

最新推荐文章于 2023-08-03 11:27:17 发布

阅读量691

点赞数

分类专栏： js 笔记文章标签： js

本文链接：https://blog.csdn.net/qq_38594056/article/details/106483218

版权

js 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

笔记

31 篇文章 1 订阅

订阅专栏

仅用作个人练习。

轮播图功能如下：

1：自动定时切换图片
2：鼠标移入暂停切换，显式左右切换的按钮
3：鼠标浮动到轮播序号上，可以自动切换。

效果如下：

轮播图效果

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 1437px;
            height: 577px;
            margin: 50px auto;
            padding: 0.01px;
            position: relative;
        }
        img {
            width: 100%;
            height: 100%;
        }
        #right, #left {
            width: 50px;
            height: 70px;
            position: absolute;
            top: 50%;
            background-color: rgba(0, 0, 0, .5);
            display: none;
            padding-top: 10px;
            padding-left: 10px;
            box-sizing: border-box;
            font-size: 30px;
            color: #ffffff;
        }
        #left {
            left: 0;
        }
        #right {
            right: 0;
        }
        ul {
            position: absolute;
            right: 30px;
            bottom: 20px;
            cursor: pointer;
            margin-left: 5px;
            margin-top: 5px;
        }
        li {
            float: left;
            text-align: right;
            list-style: none;
            border-radius: 50%;
            border: 3px rgba(255, 255, 255, .3) solid;
            background-color: rgba(0, 0, 0, .4);
            margin: 0 4px;
            width: 10px;
            height: 10px;
        }
        .liMove {
            border: 3px rgba(0, 0, 0, .4) solid;
            background-color: rgba(255, 255, 255, .3);
        }
    </style>
</head>
<body>
<div class="box">
    <a href="#"><img src="images/1.jpg" alt="" id="img"></a>
    <div id="left">&lt;</div>
    <div id="right">&gt;</div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    /*
    实现轮播图
    功能：
    1：自动定时切换图片
    2：鼠标移入暂停切换，显式左右切换的按钮
    3：鼠标浮动到轮播序号上，可以自动切换。*/

    var link = document.querySelector('a');
    var img = document.querySelector('img');
    var box = document.querySelector('.box');
    var left = document.getElementById('left');
    var right = document.getElementById('right');
    var imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg'];
    var li = document.querySelectorAll('li');

    var index = 0;
    function change() {
        img.src = 'images/' + imgArr[index];
        //动的时候 下标样式也变化
        for (let i = 0; i < li.length; i++) {
            // if (index === i) {
            //     li[index].className='liMove'
            // }else {
            //     li[i].className=''
            // }
            li[i].className=''
        }
        li[index].className='liMove'
        link.href='pages/'+index+'.html'
    }
    //定义自动切换
    //定时器跳转 定义自动切换
    var timer = setInterval(nextImg, 500)

    function nextImg() {
        index++;
        if (index === imgArr.length) {
            index = 0;
        }
        //img.src = 'images/' + imgArr[index];
        change()
    }

    //右键
    right.onclick = next;
    function next() {
        //切换最小
        index++;
        if (index >= 7) {
            index = 0;
        }
        change()
    }
    //左键
    left.onclick = last;
    function last() {
        index--;
        //切换最大
        if (index < 0) {
            index = imgArr.length-1;
        }
        change()
    }

    //鼠标移入暂停 左右并显示出来
    box.onmouseover = function () {
        clearTimeout(timer);
        left.style.display = 'block';
        right.style.display = 'block';

    };
    //移走继续
    box.onmouseout = function () {
        timer = setInterval(nextImg, 500);
        left.style.display = 'none';
        right.style.display = 'none';
    };

//给li加鼠标移入事件

    for (let i = 0; i< li.length; i++) {
        li[i].id=i;
        li[i].onmouseover = function () {
            // li[i].className = '';
            // img.src = 'images/' + imgArr[i];
            // li[i].className = 'liMove';
            index=this.id
            change()
        };
        // li[i].onmouseout = function () {
        //     li[i].className = '';
        // }
    }
</script>
</body>
</html>

百事可口

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js实现小米轮播图

仅用作个人练习。轮播图功能如下：1：自动定时切换图片2：鼠标移入暂停切换，显式左右切换的按钮3：鼠标浮动到轮播序号上，可以自动切换。效果如下：代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box {
复制链接

扫一扫