图片轮播（上一幅下一幅+圆点+自动切换）

最新推荐文章于 2024-07-02 23:15:00 发布

辣姐什么鬼

最新推荐文章于 2024-07-02 23:15:00 发布

阅读量5.1k

点赞数 5

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/52211034

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #imgList{
            width:730px;
            height:420px;
            margin:100px auto;
            border:1px solid pink;
            position:relative;
            border:6px dashed pink;
        }
        #imgList:hover .pre,#imgList:hover .next{
            display:block;
        }
        #imgList .img{
            position:absolute;
            top:0;
            left:0;
            z-index:-1;
        }
        ul li{
            list-style-type:none;
            float:left;
        }
        #imgList .num {
            float:right;
            margin-top:10px;
        }
        #imgList .num ul li{
            width:16px;
            height:16px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            border:1px solid white;
            margin-right:6px;
        }
        #imgList .num ul li a{
            display:block;
            width:16px;
            height:16px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            border:1px solid white;
            margin-right:6px;
        }
        #imgList .num ul li a:hover{
            cursor:pointer;
            background-color:pink;
        }
        #button .pre{
            width:60px;
            height:80px;
            background-color:rgba(0,0,0,0.5);
            color:white;
            font-size:40px;
            text-align:center;
            line-height:80px;
            vertical-align: middle;
            font-weight:bold;
            float:left;
            margin-top:170px;
        }
        .pre,.next{
            display:none;
        }
        .pre:hover,.next:hover{
            cursor:pointer;
        }
        #button .next{
            width:60px;
            height:80px;
            background-color:rgba(0,0,0,0.5);
            color:white;
            font-size:40px;
            text-align:center;
            line-height:80px;
            vertical-align: middle;
            font-weight:bold;
            float:right;
            margin-top:170px;
            margin-right:-94px;
        }
        #imgList .img ul li{
            width:730px;
            height:420px;
            background-image:url("s1.jpg");
        }
        .class{
            background-color:pink;
        }
    </style>
</head>
<body>
<div id="imgList">
    <div class="img">
    <ul>
        <li id="imgLi" data="0"></li>
    </ul>
    </div>
    <div class="num">
        <ul>
            <li class="class"><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
        </ul>
    </div>
    <div id="button">
        <div class="pre" onclick="pre();">&lt;</div>
        <div class="next" onclick="pre();">&gt;</div>
    </div>
</div>
<script src="jquery-1.10.2.min.js"></script>
<script>
    var imgArr=["s1.jpg","s2.jpg","s3.jpg","s4.jpg"];
    var index=0;
    function show(){//自动切换
        if(index<3){
            index++;
            //改变li的背景图片并加上一个data属性值
            $("#imgLi").css("background-image","url("+imgArr[index]+")").attr("data",index);
            //改变选中圆点
            $(".num ul li").eq(index).addClass("class").siblings().removeClass("class");
        }else{
            index=0;
            $("#imgLi").css("background-image","url("+imgArr[index]+")").attr("data",index);
            $(".num ul li").eq(index).addClass("class").siblings().removeClass("class");
        }
    }
    setInterval(show,6000);
    function pre(){//上一个按钮
        var data= $("#imgLi").attr("data");
        var num=parseInt(data)-1;
        if(num<0){
            num=3;
            $("#imgLi").css("background-image","url("+imgArr[num]+")").attr("data",num);
            $(".num ul li").eq(num).addClass("class").siblings().removeClass("class");
        }else{
            $("#imgLi").css("background-image","url("+imgArr[num]+")").attr("data",num);
            $(".num ul li").eq(num).addClass("class").siblings().removeClass("class");
        }
    }
    function next(){//下一个按钮
        var data= $("#imgLi").attr("data");
        var num=parseInt(data)+1;
        if(num>3){
            num=0;
            $("#imgLi").css("background-image","url("+imgArr[num]+")").attr("data",num);
        }else{
            $("#imgLi").css("background-image","url("+imgArr[num]+")").attr("data",num);
        }
    }
    $(".num ul li").click(function(){//圆点按钮
        $(".num ul li").eq($(this).index()).addClass("class").siblings().removeClass("class");
        var number=$(this).index();
        $("#imgLi").css("background-image","url("+imgArr[number]+")").attr("data",number);
    })
</script>
</body>
</html>