2019.11.11 网页效果

图片旋转

img {
    animation: myani 8s linear infinite;
}

亮度变化

div:hover {
    filter: brightness(100%);
}

图片放大

img:hover img {
    transform: scale(1.1, 1.1);
}

轮播加底部小点

html：

<div class="lunbo">
　　<img class="tupian" onclick="window.open('../jiemian 4/jiemian-4.html')" src="../public/images/11135558154.jpg">
　　<img class="tupian" src="../public/images/31192915981.jpg">
　　<img class="tupian" src="../public/images/179541537.jpg">
　　<img class="tupian" src="../public/images/171496540.jpg">
　　<img class="tupian" src="../public/images/18121041165.jpg">
</div>
<div class="dibu">
　　<div class="xiaodian x1"></div>
                    
　　<div class="xiaodian x2"></div>

　　<div class="xiaodian x3"></div>

　　<div class="xiaodian x4"></div>

　　<div class="xiaodian x5"></div>
                    
</div>

css：

.lunbo {
    width: 96%;
    height: 272px;
    margin-top: 80px;
    overflow: hidden;
    position: relative;
}

.lunbo img {
    width: 100%;
    height: 100%;
}

.lunbo:hover {
    cursor: pointer;
}

.dibu {
    height: 9px;
    margin-top: 15px;
}

.xiaodian {
    position: absolute;
    transition: 0.7s;
    width: 9px;
    height: 9px;
    background: #848081;
    border-radius: 50%;
    cursor: pointer;
    float: left;
    margin-right: 20px;
}

.x1 {
    width: 24px;
    background: #d8001a;
    border-radius: 12px;
}
.x2 {
margin-left: 50px;
}
.x3 {
margin-left: 100px;
}
.x4 {
margin-left: 150px;
}
.x5 {
margin-left: 200px;
}

js：

        // 轮播自动+底部小点自动
        changeImg(0);
        autoPlay();
        // -----------------------------------------
        // 点击小点更换图片
        $('.xiaodian').click(function() {
            var a = $(this).index();
            $('.tupian').eq(a).stop().fadeIn(1000).siblings().stop().fadeOut(500);
            $(".xiaodian").eq(a).stop().css({
                "width": "24px",
                "background": "#d8001a",
                "border-radius": "12px",
            }).siblings().stop().css({
                "width": "9px",
                "background": "#848081",
                "border-radius": "50%",
            })
        }).mouseover(function() {
            clearInterval(timer);
        }).mouseout(function() {
            autoPlay();
        });
        // ------------------------------------------------
        $(".lunbo").mouseover(function() {
            clearInterval(timer);
        }).mouseout(function() {
            autoPlay();
        });
        // -----------------two图片自动轮播-----------------------------

        function changeImg(index) {
            $(".tupian").eq(index).stop().show().siblings().stop().hide();
            $(".xiaodian").eq(index).stop().css({
                "width": "24px",
                "background": "#d8001a",
                "border-radius": "12px",
            }).siblings().stop().css({
                "width": "9px",
                "background": "#848081",
                "border-radius": "50%",
            });
        };

        function autoPlay() {
            timer = setInterval(function() {
                index++;
                if (index === 5) {
                    index = 0
                }
                changeImg(index)
            }, 4000)
        };

来源：https://www.cnblogs.com/l1314/p/11937992.html

标签

background

border-radius