利用jQuery实现简单轮播图

最新推荐文章于 2023-09-26 15:01:07 发布

cc_xinyi

最新推荐文章于 2023-09-26 15:01:07 发布

阅读量235

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_67443959/article/details/127176492

版权

1、首先是html代码body部分

<body>
    <div class="box">
        <div class="box-img"><img src="../pc2/1.webp" height="575px" width="1533px"></div>
        <div class="box-img"><img src="../pc2/2.webp" height="575px" width="1533px"></div>
        <div class="box-img"><img src="../pc2/3.webp" height="575px" width="1533px"></div>
        <div class="box-img"><img src="../pc2/4.webp" height="575px" width="1533px"></div>
        <div class="box-img"><img src="../pc2/7.webp" height="575px" width="1533px"></div>
        <div class="box-left">&lt;</div>
        <div class="box-right">&gt;</div>
        <div class="box-zhiding">
            <ul>
                <li class="botton"></li>
                <li class="botton"></li>
                <li class="botton"></li>
                <li class="botton"></li>
                <li class="botton"></li>
            </ul>
        </div>

    </div>

2、其次是css样式，我选择的是内部样式表，如下：

<style>
        .box{
            width: 1533px;
            height: 575px;
            position: relative;
        }
        .box-img{
           position: absolute;
           top: 0;
           left: 0;
           opacity: 0;
           transition:all 1.5s;
        }
        
      .box-img:nth-child(1){
            opacity: 1;


           }

        
        .box-left{
            width: 35px;
            height: 70px;
            background-color: #00000050;
            top:287px;
            position:absolute;
            color:#ccc;
            border-radius: 0 5px 5px 0;
            text-align: center;
            font-size: 27px;
            line-height: 70px;

           
        }
        .box-left:hover{
            background-color: #00000050;
            color:#fff;
        }

        .box-right{
            width: 35px;
            height: 70px;
            background-color: #00000050;
            top:287px;
            position:absolute;
            color:#ccc;
            border-radius: 5px 0 0 5px;
            text-align: center;
            font-size: 27px;
            line-height: 70px;
            right: 0;

           
        }
        .box-right:hover{
            background-color: #00000050;
            color:#fff;
        }

        .box-zhiding>ul{
            padding:0;
            margin:0;
            list-style:none;

        }
         /* 子选择器 */
        .box-zhiding li{
            width: 14px;
            height: 14px;
            border-radius:100%;
            background-color: #ccc;
            float:left;
            margin-right: 10px;
        }
        .box-zhiding li:hover{
            background-color:#fff;
        }
        .box-zhiding{
            position:absolute;
            bottom: 30px;
            right: 100px;
        }

3、最后一步通过js定时器、图片的opacity透明属性来实现，都是基于jQuery框架

<script type="text/javascript" src="../jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var index=0;
            var f;
            dingshiqi();

            function dingshiqi(){
             f=setInterval(function(){
                if(index==$(".box-img").length-1)//如果到达最后一张图片，切换到开始状态
                {
                 index=0;
                 $(".box-img").css("opacity","0");
                 $(".box-img").eq(index).css("opacity","1");}
                else{
            
                index++;
                $(".box-img").css("opacity","0");//全部图片变成透明
                $(".box-img").eq(index).css("opacity","1");//循环图片变成不透明
                }
            },4000)}


            $(".box-left").click(function(){
                clearInterval(f)
                if(index==0){
                    index=$(".box-img").length-1
                    $(".box-img").css("opacity","0");//全部图片变成透明
                    $(".box-img").eq(index).css("opacity","1");//循环图片变成不透明
                    dingshiqi()
                }
                else{
                    index--
                    $(".box-img").css("opacity","0");//全部图片变成透明
                    $(".box-img").eq(index).css("opacity","1");//循环图片变成不透明
                    dingshiqi()

                }
                

           
            })

            $(".box-right").click(function(){
                clearInterval(f)
                if(index==$(".box-img").length-1){
                    index=0
                    $(".box-img").css("opacity","0");//全部图片变成透明
                    $(".box-img").eq(index).css("opacity","1");//循环图片变成不透明
                    dingshiqi()
                }
                else{
                    index++;
                    $(".box-img").css("opacity","0");//全部图片变成透明
                    $(".box-img").eq(index).css("opacity","1");//循环图片变成不透明
                    dingshiqi()

                }
            })





            $(".botton").click(function(){
                clearInterval(f)
                var indexx=$(this).index()//获取当前按钮的一个索引
                index=indexx//把按钮的索引传给图片索引
                $(".box-img").css("opacity","0");//全部图片变成透明
                $(".box-img").eq(index).css("opacity","1");//循环图片变成不透明
                $(".botton").css("background-color","#ccc")
                $(".botton").eq(indexx).css("background-color","#fff")
                dingshiqi()

            })




        })
    </script>