2020_6_29 jQuery&轮播图&五星好评

1.jQuery的入门
jQuery百度脑图连接
1.1 js和jq的互相转换

js=>jq：jsdom=>$(jsdom)
jq=>js：$(jsdom)=>$(jsdom)[0]
jq=>js：$(jsdom)=>$(jsdom).get(0)

*1.2DomContentLoaded和load的区别

DomContentLoaded:页面中的html加载完就执行
onload：资源加载完毕才执行 

1.3其他零碎的见上方脑图链接

//见脑图链接

2.自定义的轮播图
css

<style>
        * {
            margin: 0;
            padding: 0;

        }

        body {
            display: flex;
            justify-content: center;
        }

        .container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 100px;
        }

        img {
            width: 700px;
            border-radius: 10px;
        }

        .imgs li {
            width: 700px;
            list-style: none;
            display: none;
            margin: 0 10px;
        }

        .indexs {
            width: 100px;
            /* border: 1px solid red; */
            display: flex;
            justify-content: space-around;
            position: absolute;
            bottom: 10px;
        }

        .indexs li {
            list-style: none;
            width: 15px;
            height: 15px;
            background-color: white;
            border-radius: 50%;
            cursor: pointer;

        }

        

        .t {
            width: 50px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: black;
            color: white;
            font-size: 30px;
            cursor: pointer;
            user-select: none;
            border-radius: 5px;
        }
        .active {
            background-color: red!important;
        }
    </style>

html

<div class="container">
//向左翻
        <div class="t prov">
            &lt;
        </div>
        <ul class="imgs">
            <li style="display: block;"><img
                    src="http://p1.music.126.net/U4aWX25bkqj1A4bKHaeNAQ==/109951165097467733.jpg?imageView&quality=89"
                    alt="">
            </li>
            <li>
                <img src="http://p1.music.126.net/w9_4EDtBaLAsg8E3k11Rkw==/109951165097376119.jpg?imageView&quality=89"
                    alt="">
            </li>
            <li>
                <img src="http://p1.music.126.net/5hQfNP2sLRrSmEAx1OGDdg==/109951165097421077.jpg?imageView&quality=89"
                    alt="">
            </li>
            <li>
                <img src="http://p1.music.126.net/-4tGAaB03yhVr53UTUbTHg==/109951165097407752.jpg?imageView&quality=89"
                    alt="">
            </li>
            <li>
                <img src="http://p1.music.126.net/2rqzxg-DP-7Rt3Ak_l7Uog==/109951165097437479.jpg?imageView&quality=89"
                    alt="">
            </li>
        </ul>
        //向右翻
        <div class="t next">
            &gt;
        </div>
        //导航点
        <ul class="indexs">
            <li class="active" ></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>//引入jq包
    <script>
        $(function () {
            let i = 0;
            let fun = function () {
                if (++i == 5) i = 0;
                $(".imgs li").eq(i).show().siblings().hide();//将除了当前需要的内容的其他内容全部隐藏
                $(".indexs li").eq(i).addClass("active").siblings(".active").removeClass(
                    "active")//给导航点添加红色classname去除旧的classname
            }
            let timer = setInterval(fun, 2000)//调用定时器

            $(".indexs li").mouseenter(function () {
                i = $(this).index();
                $(".imgs li").eq($(this).index()).show().siblings().hide();
                $(".indexs li").eq($(this).index()).addClass("active").siblings(".active").removeClass(
                    "active")
                clearInterval(timer);


            }).mouseleave(function () {
                timer = setInterval(fun, 2000)

            })
            $(".prov").click(function () {//向左的点击事件
                clearInterval(timer);
                if (--i < 0) i = 4;
                $(".imgs li").eq(i).show().siblings().hide();
                $(".indexs li").eq(i).addClass("active").siblings(".active").removeClass(
                    "active");
                timer = setInterval(fun, 2000)
            })
            $(".next").click(function () {//向右的点击事件
                clearInterval(timer);
                if (++i > 4) i = 0;
                $(".imgs li").eq(i).show().siblings().hide();
                $(".indexs li").eq(i).addClass("active").siblings(".active").removeClass(
                    "active");
                timer = setInterval(fun, 2000)
            })
            $(".t").mouseenter(function () {//两个左右按钮的移入移出样式
                $(this).css({
                    backgroundColor: "red",
                    color: "black"
                })
            }).mouseleave(function () {
                $(this).css({
                    backgroundColor: "black",
                    color: "white"
                })
            })
        })
    </script>

3.五星好评
iconfont链接

<link rel="stylesheet" href="https://at.alicdn.com/t/font_1743185_37l8tzue6bb.css">

css

<style>
        .star {
            color: gold;
            font-size: 20px;
            cursor: pointer;
        }
</style>

html

<div class="container"> </div>//容器

js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>//引入jq包
<script>
        let allstar = 10;
        let score = 5;
        //初始化是个星星，五个填充满颜色，五个空白
        for (let i = 0; i < allstar; i++) {
            let star = $("<i/>").addClass("iconfont").addClass("star");
            i < score ? star.addClass("iconstar1") : star.addClass("iconstar");
            $(".container").append(star);
        }
        //鼠标移入，将当前位置之前及本身填充满颜色
        $(".star").mouseenter(function () {
            let sign = $(this).index();
            $(".star").each(function (i) {
                i <= sign ? $(this).addClass("iconstar1").removeClass("iconstar") : $(this).addClass(
                    "iconstar").removeClass("iconstar1")
            })

        }).mouseleave(function () {//鼠标移出，将原本的样式还原及移入前有几个星星移出后还是几个
            let sign = $(this).index();
            $(".star").each(function (i) {
                i <= score ? $(this).addClass("iconstar1").removeClass("iconstar") : $(this).addClass(
                    "iconstar").removeClass("iconstar1")
            })

        }).click(function () {//绑定点击事件，将将当前位置之前及本身填充满颜色，并修改score
            let sign = $(this).index();
            score = sign;
        })
    </script>
   // 注解：scorr是个标记，标记亮着的星星的个数