轮播图效果，用JS实现，简单易懂，冲冲冲！！！

最新推荐文章于 2024-04-27 09:07:55 发布

WangLingyun111

最新推荐文章于 2024-04-27 09:07:55 发布

阅读量159

点赞数 3

分类专栏：前端 html css 文章标签： css html js

本文链接：https://blog.csdn.net/m0_62201566/article/details/120593483

版权

前端同时被 3 个专栏收录

12 篇文章 2 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

该文章详细介绍了如何利用JavaScript、CSS和HTML创建一个轮播图效果。通过设置CSS样式，创建滑动的图片容器，并使用JavaScript实现左右按钮及小圆点导航的交互功能，实现了自动切换和手动切换图片的轮播效果。

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

本篇文章主要讲的是用js实现轮播图效果，话不多说直接上代码！！

css代码：

 *{
            padding: 0;
            margin: 0;
        }
        ul,ol,li{
            list-style: none;
        }
        .wrap{
            width: 520px;
            height: 280px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .box{
            width: 2600px;
            height: 280px;
            position: absolute;
        }
        .box img{
            width: 520px;
            height: 280px;
            float: left;
        }
        .list{
            height: 10px;
            position: absolute;
            bottom: 20px;
            left: 50%;
            width: 200px;
            margin-left: -100px;
        }
        .list li{
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            margin: 0 5px;
            float: left;
        }
        .leftBtn{
            position: absolute;
            width: 20px;
            height: 30px;
            background-color: rgba(0,0,0,0.5);
            left: 0;
            margin-top: -10px;
            top: 50%;
            text-align: center;
            line-height: 30px;
            color: #fff;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .rightBtn{
            position: absolute;
            width: 20px;
            height: 30px;
            background-color: rgba(0,0,0,0.5);
            right: 0;
            margin-top: -10px;
            top: 50%;
            text-align: center;
            line-height: 30px;
            color: #fff;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .list .select{
            background: yellow;
        }

html：

<div class="wrap">
        <div class="box">
            <img src="https://img.alicdn.com/imgextra/i1/6000000008048/O1CN01oIVdRc29K2D0FObyv_!!6000000008048-0-octopus.jpg" alt="">
            <img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
            <img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
            <img src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg" alt="">
            <img src="https://img.alicdn.com/imgextra/i1/6000000007374/O1CN01pbkC8a24LLGHhwVeh_!!6000000007374-0-octopus.jpg" alt="">
        </div>
        <ul class="list">
            <li class="select"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="leftBtn">&lt;</div>
        <div class="rightBtn">&gt;</div>
 </div>

需要引入：

<script src="js/jquery-3.6.0.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.color.js"></script>

js:

 $(function(){
        var num=0;
        var oimg=$('.box img');
        var oWidth=oimg.eq(0).width();
        var oli=$('.list li');
        function LBT(lb){
            $('.list li').eq(lb).addClass('select').siblings().removeClass('select');
            $('.box').stop(true,true)
            $('.box').animate({
                left:-lb*oWidth+'px'
            },500)
        };
        var timer=null;
        timer=setInterval(function(){
            num++;
            if(num>=oimg.length){
                num=0;
            };
            LBT(num)
        },3000);
       
        $('.leftBtn').click(function(){
            num--;
            if(num<0){
                num=oimg.length-1;
            }
            LBT(num);
            timer=null;
            clearInterval(timer);
        });
        $('.rightBtn').click(function(){
            num++;
            if(num>=oimg.length){
                num=0;
            };
            LBT(num);
            timer=null;
            clearInterval(timer);
        })
        oli.mouseover(function(){
            var num=$(this).index();
            LBT(num);
            timer=null;
            clearInterval(timer);
        })
        
        $('.wrap').mouseover(function(){
            timer=null;
            clearInterval(timer);
        });
        $('.wrap').mouseout(function(){
            timer=setInterval(function(){
                num++;
                if(num>=oimg.length){
                    num=0;
                };
                LBT(num)
            },3000);
        })
    })