前端3（点击式轮播图）

最新推荐文章于 2024-04-05 18:17:54 发布

木易离火

最新推荐文章于 2024-04-05 18:17:54 发布

阅读量306

点赞数

分类专栏： 2

本文链接：https://blog.csdn.net/LN_VERSION/article/details/100878383

版权

2 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="css/jquery-1.8.3.min.js"></script>
</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>
<script>

    $(function () {

        var imgs=["adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg"];

        $(".adver").mouseenter(function () {
            $(".arrowLeft,.arrowRight").show();
        });
        $(".adver").mouseleave(function () {
            $(".arrowRight,.arrowLeft").hide();
        });


        var index=0; //声明变量所对应下标的值


        $(".arrowRight").click(function () {

            //判断是否最后一张图片
            if (index==(imgs.length-1)) {

                alert("最后一张了！！")
            }else {

                index++;
                var imgName=imgs[index];
                $(".adver").css("background-image","url(images/"+imgName+")");

                //修改数字样式
                $("ul li:nth-of-type("+(index+1)+")").css("background-color","orange").siblings().css("background-color","black");
            }
        });

        $(".arrowLeft").click(function () {

            //判断是否最后一张图片
            if (index==(0)) {

                alert("最后一张了！！")
            }else {

                index--;
                var imgName=imgs[index];
                $(".adver").css("background-image","url(images/"+imgName+")");

                $("ul li:nth-of-type("+(index+1)+")").css("background-color","orange").siblings().css("background-color","black");
            }
        });

/*        $("li").mouseover(function () {

            $(this).css("background-color","#FFC12A").siblings().css("background-color","black");

            var l=$(this);
            var li=l.html();

            $(".adver").show().css("background-image","url(\"images/adver0"+li+".jpg\")");
        });*/
    });
</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;
}