使用jQuery实现图片轮播的简单小程序

柔情只为你懂 2023-06-21 03:55 8阅读 0赞

## 下面是用轮播做的简单小轮播，希望宝宝们喜欢！*用最简单的代码，做最多的事！* ##

> **实现点击下方原点和两边按钮，图片变换！**

** 效果展示：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODYwNTgy_size_16_color_FFFFFF_t_70][]

**代码展示： **

> **html代码与js文件：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>上机4，制作广告图片轮播切换效果</title>
        <link rel="stylesheet" href="./Exercise04.css"/>
    </head>
    <body>
        <div class="lunbo">
            
            <div class="pic">
                <ul>
                    <li style="display:block;"><img src="../img/q1.jpg" alt=""></li>
                    <li><img src="../img/q2.jpg" alt=""></li>
                    <li><img src="../img/q3.jpg" alt=""></li>
                    <li><img src="../img/q4.jpg" alt=""></li>
                    <li><img src="../img/q5.jpg" alt=""></li>
                    <li><img src="../img/q6.jpg" alt=""></li>
                </ul>
            </div>
    
            
            <div class="origin">
                <ul>
                    <li style="background:orange">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li style="margin-right:0;">6</li>
                </ul>
            </div>
    
            
            <div class="button-left"><</div>
            <div class="button-right">></div>
            
        </div>
        <script src="../JQpackage/jquery-1.12.4.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //用来接受下标
                let index = 0;
    
                //点击左按钮
                $(".button-left").click(function(){
                    if(index <= 0){
                        alert("到头了"+index);
                        return;
                    }else{
                        index--;
                        Yuan(index);
                    }
                });
    
                //点击右按钮
                $(".button-right").click(function(){
                    if(index >= $(".pic>ul>li").length-1){
                        alert("到尾了"+index);
                        return;
                    }else{
                        index++;
                        Yuan(index);
                    }
                });
                    
                //鼠标滑过
                $(".origin>ul>li").each(function(j,element){
                    $(element).mouseover(function(){
                        index = j;
                        Yuan(j);
                    });
                });
    
                //循环显示换图片或原点颜色
                function Yuan(a){
                    $(".pic>ul>li").each(function(i){
                            $(".origin>ul>li").eq(i).css({"background":"#2C4B4D"});
                            $(this).hide();
                    });
                    $(".origin>ul>li").eq(a).css({"background":"orange"});
                    $(".pic>ul>li").eq(a).show();
                }
            });
        </script>
    </body>
    </html>

>  **css文件：**

*{
        margin:0;
        padding:0;
    }
    li{
        list-style-type:none;
    }
    .lunbo{
        width:655px;
        height:415px;
        background:red;
        position:relative;
    }
    .pic>ul>li{
        position:absolute;
        display:none;
    }
    .origin{
        width:230px;
        height:30px;
        position:absolute;
        z-index: 2;
        bottom:5px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .origin>ul>li{
        float:left;
        width:30px;
        height:30px;
        background:#2C4B4D;
        text-align:center;
        line-height:30px;
        margin-right:10px;
        border-radius:30px;
        color:#fff;
        cursor:pointer;
    }
    .button-left{
        position:absolute;
        width:50px;
        height:60px;
        z-index:1;
        font-size:30px;
        text-align:center;
        line-height:60px;
        background:rgba(0,0,0,0.3);
        left:0;
        top:40%;
        font-weight:bold;
        cursor:pointer;
    }
    .button-right{
        position:absolute;
        width:50px;
        height:60px;
        z-index:1;
        font-size:30px;
        text-align:center;
        line-height:60px;
        background:rgba(0,0,0,0.3);
        right:0;
        top:40%;
        font-weight:bold;
        cursor:pointer;
    }

### 感谢宝宝们的观看！ ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODYwNTgy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191211104308668.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODYwNTgy,size_16,color_FFFFFF,t_70