兼容IE6以上和其它浏览器

CSS部分代码

body,div,ul,li{
    margin:0;
    padding:0;
}
ul{
    list-style:none;
}
img{
    border:0;
}
.banner{
    margin:30px auto 0;
    width:635px;
}
.large_box{
    margin-bottom:10px;
    width:600px;
    height:350px;
    overflow:hidden;
}
.large_box img{
    display:block;
}
.small_box{
    width:600px;
    height:73px;
    overflow:hidden;
}
.small_list{
    position:relative;
    float:left;
    width:550px;
    height:73px;
    overflow:hidden;
}
.small_list ul{
    height:50px;
    overflow:hidden;
}
.small_list ul li{
    position:relative;
    float:left;
    margin-right:10px;
    width:100px;
}
.small_list ul li img{
    width: 100%;
    height: auto;
    display:block;
}
.small_list ul li .bun_bg{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:50px;
    background:#FFF;
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity:0.6;
    opacity:0.6;
}
.small_list ul li.on .bun_bg{
    display:block;
}
.btns{
    display:block;
    width:20px;
    height:50px;
    background-color:#777;
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer;
}
.btns:hover{
    background-color:#333;
}
.lefts_btn{
    float:left;
    margin-right:10px;
    background-image:url(../images/left_btn.png);
}
.rights_btn{
    float:right;
    background-image:url(../images/right_btn.png);
}

HTML部分代码

<div class="banner">
    <div class="large_box">
        <ul class=" list-paddingleft-2">
            <li>
                <p>
                    <code><img src="images/big-banner5.jpg" alt="" width="600" height="350"/></code>
                </p>
            </li>
            <li>
                <p>
                    <code><img src="images/big-banner5.jpg" alt="" width="600" height="350"/></code>
                </p>
            </li>
            <li>
                <p>
                    <code><img src="images/big-banner5.jpg" alt="" width="600" height="350"/></code>
                </p>
            </li>
            <li>
                <p>
                    <code><img src="images/big-banner5.jpg" alt="" width="600" height="350"/></code>
                </p>
            </li>
            <li>
                <p>
                    <code><img src="images/big-banner5.jpg" alt="" width="600" height="350"/></code>
                </p>
            </li>
            <li>
                <p>
                    <code><img src="images/big-banner5.jpg" alt="" width="600" height="350"/></code>
                </p>
            </li>
        </ul>
    </div>
    <div class="small_box">
        <code><span class="btns lefts_btn"></span>
        <div class="small_list">
            <ul class=" list-paddingleft-2">
                <li>
                    <p>
                        <img src="images/big-banner5.jpg" alt="" width="600" height="350"/>
                    </p>
                    <div class="bun_bg"></div>
                </li>
                <li>
                    <p>
                        <img src="images/big-banner5.jpg" alt="" width="600" height="350"/>
                    </p>
                    <div class="bun_bg"></div>
                </li>
                <li>
                    <p>
                        <img src="images/big-banner5.jpg" alt="" width="600" height="350"/>
                    </p>
                    <div class="bun_bg"></div>
                </li>
                <li>
                    <p>
                        <img src="images/big-banner5.jpg" alt="" width="600"