今天来个简单的 就是jquery写的轮播图

简单一个css（就是加在图片上面的小黑点的左浮动有点问题  没有报错  就是显示有点错误）

 <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .slider {
            width: 790px;
            height: 340px;
            margin: 100px auto;
            position: relative;
        }
        
        .slider>ul>li {
            display: none;
            position: absolute;
        }
        
        .slider li:first-child {
            display: block;
        }
        
        .arrow {
            display: none;
        }
        
        .slider:hover .arrow,
        .slider:hover .box {
            display: block;
        }
        
        .left,
        .right {
            width: 30px;
            height: 60px;
            font-size: 30px;
            background-color: wheat;
            color: red;
            position: absolute;
            top: 50%;
            margin-top: -30px;
            line-height: 60px;
            text-align: center;
            cursor: pointer;
        }
        
        .left:hover,
        .right:hover {
            background-color: yellow;
        }
        
        .left {
            left: 0;
        }
        
        .right {
            right: 0;
        }
        
        .box {
            width: 150px;
            height: 20px;
            position: absolute;
            left: 50%;
            margin-left: -75px;
            bottom: 20px;
            display: none;
        }
        
        .box li {
            width: 12px;
            height: 12px;
            background-color: white;
            border-radius: 50%;
            display: inline-block;
            float: left;
            margin-left: 12px;
        }
        
        .show {
            background-color: orange !important;
        }
        
        img {
            width: 790px;
            height: 340px;
        }
    </style>

 

jquery是下载的最新的一个版本

<script src="jquer.min.js"></script>

 简单的HTML   （图片什么的自己随便找）

<div class="slider">
        <ul class="img">
            <li>
                <a href="#"><img src="https://img2.baidu.com/it/u=867436592,3708161481&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=291" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="https://img1.baidu.com/it/u=3801391254,1886875664&fm=253&fmt=auto&app=138&f=JPG?w=500&h=295" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="https://img1.baidu.com/it/u=2782517172,2403300180&fm=253&fmt=auto&app=138&f=JPG?w=831&h=500" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="https://img2.baidu.com/it/u=2638131986,3789001392&fm=253&fmt=auto&app=138&f=JPG?w=847&h=500" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="https://img2.baidu.com/it/u=1039761252,3980622941&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></a>
            </li>
        </ul>
        <div class="arrow">
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
        </div>
        <div class="box">
            <ul>
                <li class="show"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

js部分

 <script>
        $(function() {
            //设置图片下标为0
            let num = 0
                //向右添加点击事件
            $('.right').click(function() {
                    num++
                    if (num === $('.slider>ul>li').length) {
                        num = 0
                    }
                    $('.slider li').eq(num).fadeIn().siblings('li').fadeOut()
                    $('.box li').eq(num).addClass('show').siblings('li').removeClass('show')
                })
                //向左添加点击事件
            $('.left').on('click', function() {
                    num--
                    if (num === -1) {
                        num = $('.slider>ul>li').length - 1
                    }
                    $('.slider li').eq(num).fadeIn().siblings('li').fadeOut()
                    $('.box li').eq(num).addClass('show').siblings('li').removeClass('show')
                })
                //给圆点添加点击事件
            $('.box li').click(function() {
                    let idx = $(this).index()
                    $('.img li').eq(idx).fadeIn().siblings('li').fadeOut()
                    $('.box li').eq(idx).addClass('show').siblings('li').removeClass('show')
                })
                //自动转换图片
            let time
            time = setInterval(function() { //定时器
                    $('.right').click()
                }, 1000)
                //当鼠标移到图片页面不动
            $('.slider').hover(function() {
                clearInterval(time) //关闭定时器
                time = null
            }, function() { //当鼠标移开图片定时器重新运行
                time = setInterval(function() {
                    $('.right').click()
                }, 1000)
            })
        })
    </script>