Html
    Css
    Js

    
                        
 * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        #brand {
            width: 330px;
            height: 400px;
            border: 1px solid #ddd;
            box-shadow: 0px 0px 5px #ddd;
            margin: 30px auto;
        }
        
        #brand .title {
            width: 100%;
            height: 35px;
            line-height: 35px;
            font-size: 16px;
            margin-top: 4px;
            border-bottom: 2px solid #33261c;
            text-align: center;
            color: #33261c;
        }
        
        #brand .bd-box {
            width: 284px;
            height: 358px;
            overflow: hidden;
            padding: 0 24px;
        }
        
        #brand .bd-box li {
            float: left;
            width: 122px;
            height: 77px;
            overflow: hidden;
            position: relative;
            margin: 10px 10px 0px 10px;
        }
        
        #brand .bd-box li img {
            width: 120px;
            height: 75px;
            border: 1px solid #e9e8e8;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            overflow: hidden;
        }
        
        #brand .bd-box li span {
            width: 120px;
            height: 0px;
            border: 1px solid #e9e8e8;
            position: absolute;
            left: 0;
            top: 38px;
            z-index: 1;
            text-align: center;
            line-height: 75px;
            font-size: 14px;
            color: #fff;
            background: #ffa340;
            font-weight: bold;
            overflow: hidden;
            display: none;
        }
        
        #brand .bd-box li a {
            width: 120px;
            height: 75px;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 3;
        }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

jquery图片翻牌旋转切换

0