主页

1.请在adver.html文件中添加

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/banner.js"></script>

2.在js文件夹内新建banner.js文件将以下代码复制到banner.js文件中,将标记数和其他与qiao相同的修改成自己名字,在图片中方框标记的

$(function(){
    
    // 定义标记数
    var qiao = 1;
    
    $(".adver").hover(
        function(){
        $("#left").show();
        $("#right").show();
        clearInterval(id);
        },
        function(){
            $("#left").hide();
            $("#right").hide();
            id = setInterval(banner,1000);
        }
    )
    
    
    $("#left").click(function(){
        if(1 == qiao){
            qiao = 6;
        } else {
            qiao--;
        }
        $(".adver").css("background-image","url(images/adver0"+ qiao +".jpg)");
        $("li:eq(" + (qiao - 1) + ")").css("background-color","orange");
        $("li:eq(" + (qiao - 1) + ")").siblings().css("background-color","#333333");
    })
    
    $("#right").click(function(){
        if(6 == qiao){
            qiao = 1;
        } else {
            qiao++;
        }
        $(".adver").css("background-image","url(images/adver0"+ qiao +".jpg)");
        $("li:eq(" + (qiao - 1) + ")").css("background-color","orange");
        $("li:eq(" + (qiao - 1) + ")").siblings().css("background-color","#333333");
    })
    
    $("li").mouseover(function(){
        $(this).css("background-color","orange");
        $(this).siblings().css("background-color","#333333");
        qiao = $(this).html();
        $(".adver").css("background-image","url(images/adver0"+ qiao +".jpg)");
    })
    
    
    function banner() {
        if(6 == qiao) {
            qiao = 1;
        } else {
            qiao++;
        }
        $(".adver").css("background-image","url(images/adver0"+ qiao +".jpg)");
        $("li:eq(" + (qiao - 1) + ")").css("background-color","orange");
        $("li:eq(" + (qiao - 1) + ")").siblings().css("background-color","#333333");
    }

    var id = setInterval(banner,1000);
    
})

3.以防作业雷同,请自行在banner.js文件中按照题目需求说明Word文档填写注释

---考试文件链接在最后

adver.html 文件
1

banner.js 文件
2

3

点击下载
jQuery考试文件.zip

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
18
查看目录

目录

来自 《jQuery》
评论

  1. 评论头像
    1. 评论头像
      @anyi Joe 作者
      2021-12-21 回复

  2. 评论头像
    Joe 作者
    2021-12-17 回复

博主很懒,啥都没有
4 文章数
7 评论量
2 分类数
7 页面数
已在风雨中度过 162天9小时57分