图片轮播——点击切换

Posted 2020-10-09 @binglong180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片轮播——点击切换相关的知识，希望对你有一定的参考价值。

效果图

html代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div>
    <div class="arrowRight">></div>
</div>

</body>
</html>

jQuery代码

<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $(".adver").mouseover(function () {
            $(".arrowLeft").show();
            $(".arrowRight").show();
        }).mouseout(function () {
            $(".arrowLeft").hide();
            $(".arrowRight").hide();
        })
        var i = 0;
        var path = ["adver01.jpg", "adver02.jpg", "adver03.jpg", "adver04.jpg", "adver05.jpg", "adver06.jpg"];
        $(".arrowRight").click(function () {
            if (i == path.length - 1) {
                i=0;
            } else {
                i++;
                var str = "images/" + path[i];
                $(".adver").css({"background": "url(" + str + ")"});
                $("li:nth-of-type("+(i+1)+")").css({"background":"orange"});
                $("li:nth-of-type("+(i+1)+")").siblings().css({"background":"#333"});
            }
        })
        $(".arrowLeft").click(function () {
            if (i == 0) {
                i=6;
            } else {
                i--;
                var str = "images/" + path[i];
                $(".adver").css({"background": "url(" + str + ")"});
                $("li:nth-of-type("+(i+1)+")").css({"background":"orange"});
                $("li:nth-of-type("+(i+1)+")").siblings().css({"background":"#333"});
            }
        })
    })

</script>

CSS代码

ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "微软雅黑"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
    position: absolute;
    width: 30px;
    background:rgba(0,0,0,0.2);
    height: 50px;
    line-height: 50px;
    text-align: center;
    top:200px;
    z-index: 150;
    font-family: "微软雅黑";
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){
    background: orange;
}

以上是关于图片轮播——点击切换的主要内容，如果未能解决你的问题，请参考以下文章