2020-10-13

最新推荐文章于 2021-03-14 13:09:23 发布

小黑 .

最新推荐文章于 2021-03-14 13:09:23 发布

阅读量66

点赞数 2

分类专栏：学习文章标签： jquery

本文链接：https://blog.csdn.net/qq_46649900/article/details/109060593

版权

学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用jQuery+AJAX，制作淡入淡出的轮播图

废话不多说，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
        }
        body {
            background-color: #f5f4f5;
        }
        .box {
            position: relative;
            margin: 200px 500px;
        }
        .img {
            position: absolute;
            width: 600px;
            height: 200px;
            overflow: hidden;
        }
        ul img {
            width: 600px;
            height: 200px;
        }
        li  {
            list-style: none;
        }
        .toggle {
            width: 600px;
            height: 60px;
            position: absolute;
            display: none;
        }
        .left, .right {
            width: 30px;
            height: 100%;
            line-height: 60px;
            margin-top: 70px;
            text-align: center;
            background-color: gray;
            opacity: 0.5;
            font-size: 24px;
            border-radius: 5px;
            cursor: pointer;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="img">
            <ul id="ulData">
            </ul>
        </div>
        <div class="toggle">
            <span class="left"><</span>
            <span class="right">></span>
        </div>
    </div>
    
    <!-- 涉及到跨域知识，需要将域名通过script标签的方式将其引入 -->
    <script src="./jquery.js"></script>
    <!-- <script src="http://www.barteam.cn:8086/sliderlist"></script> -->
    <script>
        $(function() {
            //拿到服务器地址
            var url = 'http://www.barteam.cn:8086/sliderlist';
            //将其以script标签的格式追加到body中
            $("body").append($("<script src='" + url + "'><script>"));

            //ajax可以异步请求
            $.ajax({
                type: 'get', //请求方式，还有一种是post
                dataType: 'json',//数据类型
                async: true,//默认为异步，同步则为false
                url: url,//url地址，这里上面已经通过变量的方式将其赋值，这里直接写入url即可
                data: {

                },
                //res参数--> 函数返回的json对象
                success: function(res){
                    //将其清空
                    var str = " ";
                    //进行遍历
                    for(var i=0;i<res.Data.length;i++){
                        //通过``符，将img标签给解析了，${}里面写入图片地址，直接通过地址将其解析为图片
                        var imgUrl = `<img src="${res.Data[i].img_url}" alt="">`;
                        //进行字符串拼接
                        str += "<li>" + imgUrl + "</li>";
                        //下边是拼接的第二种方式
                        // str += `<li><img src="${res.Data[i].img_url}" alt=""></li>`;
                    }
                    //将str也就是li标签追加到id为ulData的ul下
                    $("#ulData").append(str);

                    //打印出图片的长度
                    // console.log(res.Data.length)

                    //打印出图片的url
                    // console.log(res.Data[0].img_url);   
                }
            })

            $(".box").on("mouseover",function() {
                $(".toggle").css("display","block");
            })
            $(".box").on("mouseout",function() {
                $(".toggle").css("display","none");
            })

            var index = 0;
            // var a = $("ul").children.length;
            $(".left").on("click",function() {
                index++;
                //当index大于照片长度时，将index赋值为0
                if(index > $("ul").children.length){
                    index = 0;
                }
                $("li").eq(index).fadeIn("slow").siblings().fadeOut("fast");
            })
            $(".right").on("click",function() {
                index++;
                if(index > $("ul").children.length){
                    index = 0;
                }
                $("li").eq(index).fadeIn("slow").siblings().fadeOut("fast");
            })
        })
        
    </script>
</body>
</html>

效果如下图
在这里插入图片描述

小黑 .

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2020-10-13

使用jQuery+AJAX，制作淡入淡出的轮播图废话不多说，直接上代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &l
复制链接

扫一扫