网页简易轮播图代码

最新推荐文章于 2025-07-02 18:01:25 发布

你又双叕开始了

最新推荐文章于 2025-07-02 18:01:25 发布

阅读量1.6w

点赞数 6

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42575531/article/details/81141894

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;
}

(须自建一个image文件夹存储所需要的图片并且导入,导入时注意路径)

HTML以及JQ部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    //导入JQ
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            //鼠标移至左右两边时显示左右箭头
            $(".adver").mouseover(function(){
                $(".arrowRight").css("display","block")
                $(".arrowLeft").show();
            }).mouseout(function(){
                //鼠标移出时进行隐藏
                $(".arrowRight").hide();
                $("arrowLeft").hide()
            })
            //创建数组,存入集合
            var img=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
            //定义数组下标
            var index=0;
            //单击左箭头事件
            $(".arrowLeft").click(function(){

                //判断图片是否为第一张
                if(index==0){
                    alert("这是第一张照片！！！")
                }else{
                    //下标位置
                    index--;
                    var i=index+1;//图片位置
                    //获取数组中的图片index为下标
                    $(".adver").css("background","url(images/"+img[index]+")")
                    //寻找同辈元素并且改变颜色
                    $("li:nth-of-type("+i+")").css("background","red").siblings().css("background","gray")
                }
            })
            //单击右箭头事件
            $(".arrowRight").click(function lxb(){
                //判断是否是最后一张
                if(index==img.length-1){
                  alert("这是最后一张照片！！！")
                }else{
                    //下标位置增加(右移)
                    index++;
                    var i=index+1;//图片位置
                    //获取数组中的图片index为下标
                    $(".adver").css("background","url(images/"+img[index]+")")
                    //寻找同辈元素并且改变颜色
                    $("li:nth-of-type("+i+")").css("background","red").siblings().css("background","gray")
                }
            })
            //定义定时器用来滚动图片
            function a(){
                if(index==img.length-1){
                    alert("这是最后一张照片！！！")
                }else{
                    index++;//
                    var i=index+1;//图片位置
                    //获取数组中的图片index为下标
                    $(".adver").css("background","url(images/"+img[index]+")")
                    //寻找同辈元素并且改变颜色
                    $("li:nth-of-type("+i+")").css("background","red").siblings().css("background","gray")

                }
            }
            //每5s更换一次图片
           setInterval(a,5000)
            //鼠标悬浮的换图事件
            $("ul li").mouseover(function(){
                index=parseInt($(this).attr("value"));
                //获取数组中的图片index为下标
                $(".adver").css("background","url(images/"+img[index]+")")
                //寻找同辈元素并且改变颜色
                $("li:nth-of-type("+(index+1)+")").css("background","red").siblings().css("background","gray")
            })
        })

    </script>
</head>s
<body onload="a">
<div class="adver">
    <ul>
        <li value="0">1</li>
        <li value="1">2</li>
        <li value="2">3</li>
        <li value="3">4</li>
        <li value="4">5</li>
        <li value="5">6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
</html>

JQ文件使用的是jquery-1.12.4.js