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

最新推荐文章于 2023-12-20 17:27:12 发布

老明宇.

最新推荐文章于 2023-12-20 17:27:12 发布

阅读量258

点赞数 1

分类专栏： JS与JQ饭店文章标签： jQuery 轮播

本文链接：https://blog.csdn.net/qq_44860582/article/details/103488355

版权

JS与JQ饭店专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

效果展示：

代码展示：

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">
        <!-- pic -->
        <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>

        <!-- origin -->
        <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>

        <!-- button -->
        <div class="button-left">&lt;</div>
        <div class="button-right">&gt;</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;
}