循环轮播图

mttp02

已于 2023-01-17 22:56:37 修改

阅读量114

点赞数

文章标签： css 前端 html

于 2023-01-17 22:19:17 首次发布

本文链接：https://blog.csdn.net/m0_74348480/article/details/128721169

版权

1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示;当鼠标放在图片上方时，停止轮播，并且左右箭头会显示;
2图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上;
3.点击左右箭头可以进行左右图片的切换;
4.图片上需有介绍的文字，会随图片切换一起进行切换。

<!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 type="text/css">
        /*清除边距*/
        div,ul,li{
            margin: 0;
            padding: 0;
        }
        /*首先准备一个放图片的容器*/
        .container{
            width: 500px;
            height: 280px;
            position: relative;
            top: 100px;
            left: 30%;
            /*border: 1px solid #ccc;*/
        }
        /*图片样式*/
        .container img{
            position: absolute;        /*把所有图片放在同一个位置*/
            width: 100%;
            transition-duration: 0.5s;    /*设置过渡时间*/
            opacity: 0;                /*把所有图片变透明*/
        }
        /*图片显示开关*/
        .container img.on{
            opacity: 1;                /*用于显示图片*/
        }
        /*左右按钮 */
        .left, .right{
            position: absolute;
            top: 30%;
            width: 60px;
            height: 100px;
            line-height: 100px;
            background-color: #666;
            opacity: 0.5;
            text-align: center;
            font-size: 60px;
            color: #ccc;
            display: none;    /*先隐藏按钮*/
            cursor: pointer;    /*设置鼠标悬停时的样式*/
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .container:hover .left, .container:hover .right{
            display: block;            /*鼠标悬停才容器范围内时显示按钮*/
        }
        .left:hover, .right:hover{
            color: #fff;
        }
        /*焦点*/
        .container ul{
            position: absolute;
            bottom: 0;
            max-width: 500px;
            padding: 5px 200px;
        }
        .container ul li{
            list-style: none;
            float: left;
            background-color: #ccc;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 10px;
            cursor: pointer;
        }
        .container ul li.active{
            background-color: #282923;        /*焦点激活时的样式*/
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 先把第一张图片显示出来 -->
        <img class="on" src="./图片19.png" />
        <img src="./图片21.png" />
        <img src="./图片32.png" />
        <img src="./图片8.png" />
        <!-- 左右切换 -->
        <div class="left"><</div>
        <div class="right">></div>
        <!-- 焦点 -->
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
<!-- js部分 -->
    <script type="text/javascript">
        //1、找到container下的所有img标签,li标签,左右按钮
        var p = document.querySelector('.container')
        var aImgs = document.querySelectorAll('.container img');
        var aLis = document.querySelectorAll('.container li');
        var btnLeft = document.querySelector('.container .left');
        var btnRight = document.querySelector('.container .right');
        //点击事件
        //点击按钮图片切换
        var index = 0;        //当前图片下标
        var lastIndex = 0;
        btnRight.onclick = function(){
            //记录上一张图片的下标
            lastIndex = index;
            //清除上一张图片的样式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index++;
            index %= aImgs.length;    //实现周期性变化
            //设置当前图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
        //左边按钮类似
        btnLeft.onclick = function(){
            //记录上一张图片的下标
            lastIndex = index;
            //清除上一张图片的样式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index--;
            if (index < 0) {
                index = aImgs.length - 1;
            }
            //设置当前图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }


         window.timer=setInterval(move,2000);
        function move(){
             //记录上一张图片的下标
             lastIndex = index;
            //清除上一张图片的样式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index++;
            index %= aImgs.length;    //实现周期性变化
            //设置当前图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
        p.onmouseover=function(){
			clearInterval(window.timer)
		}

        p.onmouseout=function(){
			window.timer=setInterval(move,2000);
		}

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