经典轮播图的实现

最新推荐文章于 2023-05-16 14:05:47 发布

满舰饰v

最新推荐文章于 2023-05-16 14:05:47 发布

阅读量465

点赞数 1

分类专栏：轮播图 JS 文章标签： js css html javascript

本文链接：https://blog.csdn.net/qq_40893035/article/details/106041731

版权

JS 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

轮播图

1 篇文章 1 订阅

订阅专栏

最为经典的轮播图模板，可以在此之上进行各种样式修改

1 . 自动轮播
2 . 点击下方对应点进行图片切换
3 . 点击左右按钮，进行上一张，下一张切换
这是最为基础的模板，初学者可以拿来练手，老手可以在此之上进行样式修改，我在写这个轮播图的时候主要以实现功能为主，样式只做了简单的调整，不能称得上美观，但是五脏俱全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 1200px;
            height: 460px;
            position: relative;
        }
        .banner{
            width: 1200px;
            height: 460px;
            position: relative;
            overflow: hidden;
        }
        .slideImg{
            display: none;
        }
        .imgActive{
            display: block;
        }
        //此处以三张图片为例，可以自行增加图片数量，但注意修改下面的参数
        .slid1{
            width: 1200px;
            height: 460px;
            background-image: url(img/1.jpg);
        }
        .slid2{
            width: 1200px;
            height: 460px;
            background-image: url(img/2.jpg);
        }
        .slid3{
            width: 1200px;
            height: 460px;
            background-image: url(img/3.jpg);
        }
        .prev{
            position: absolute;
            width: 30px;
            height: 60px;
            background-color: red;
            left: 0;
            top: 230px;
            margin-top: -30px;
        }
        .next{
            position: absolute;
            width: 30px;
            height: 60px;
            background-color: red;
            right: 0;
            top: 230px;
            margin-top: -30px;
        }
        .dots{
            position: absolute;
            left: 50%;
            bottom: 0;
            margin-left: -100px;
        }
        .dots span{
            display: inline-block;
            border-radius: 50%;
            margin-left: 20px;
            width: 30px;
            height: 30px;
            background-color: red;
        }
        .dots span.active{
            background-color: green;
        }
    </style>
</head>
<body>
//定义最外层的div  main方便插入到任何组件中去
    <div class="main" id="main">
    //轮播图的最外围div，banner
        <div class="banner" id="banner">
            <a href="#">
                <div class="slideImg slid1 imgActive"></div>
            </a>
            <a href="#">
                <div class="slideImg slid2"></div>
            </a>
            <a href="#">
                <div class="slideImg slid3"></div>
            </a>
        </div>
        //分别为上一张，下一张
        <a class="prev" id="prev" href="#"></a>
        <a class="next" id="next" href="#"></a>
        //图片居中下方的点，点击可以切换到对应图片
        <div class="dots" id="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <script>
    //所需要获取的所有变量，此处的index 和timer 一定要定义成全局变量，非常重要
        var index = 0,
            timer = null,
            main = document.getElementById("main"),
            prev = document.getElementById("prev"),
            next = document.getElementById("next"),
            imgs = document.getElementById("banner").getElementsByTagName('div'),
            len = imgs.length,
            dots = document.getElementById("dots").getElementsByTagName('span');
            // console.log(len);
            // console.log(dots);
	//封装切换图片的函数，减少代码量
            function changeImg(){
                for (let i = 0; i < len; i++) {
                    imgs[i].style.display = 'none';
                    dots[i].className = "";
                }
                imgs[index].style.display = 'block';
                dots[index].className = "active";
            }
	//下一张
            next.addEventListener('click',function(){
                index++;
                if(index>=len) index = 0;
                changeImg();
            })
	//上一张
            prev.addEventListener('click',function(){
                index--;
                if(index<0) index = len-1;
                changeImg();
            })
	//底部点点，点击切换图片
            for (let i = 0; i < len; i++) {
                dots[i].setAttribute("tid",i);
                dots[i].addEventListener('click',function(){
                //this指的是对应点击事件的元素
                    index = this.getAttribute('tid');
                    changeImg();
                })
            }
	//开始自动轮播图片
            function startAutoPlay(){
                timer = setInterval(function(){
                    index ++ ;
                    if(index>=len) index = 0;
                    changeImg();
                },2000)
            }
	//结束自动轮播图片
            function stopAutoPlay(){
                if(timer){
                    clearInterval(timer);
                }
            }
	//鼠标移入时，停止轮播
            main.addEventListener('mouseover',stopAutoPlay)
    //鼠标移出时，开始轮播
            main.addEventListener('mouseout',startAutoPlay)
	//加载完成后自动调用开始轮播函数
            startAutoPlay();
    </script>
</body>
</html>