使用插件快速完成banner图及细节总结

来源：互联网发布：tensorflow 分布式计算编辑：程序博客网时间：2024/06/06 02:19

这里使用的插件是superslide插件,能快速完成轮播图的切换以及很多功能，看起来比较方便
常见的banner图格式

<!DOCTYPE html><html lang="en"><head><!-- 710 355 --><!-- 固定位置的banner图 --><!-- hd 里面的li 最好设置一个背景 因为是transparent的话就会在IE8中hover不到 -->    <meta charset="UTF-8">    <title>superslide第一种</title>    <script type="text/javascript" src="jquery.min.js"></script>    <script type="text/javascript" src="superSlide2.1/jquery.SuperSlide.2.1.1.js"></script>    <link rel="stylesheet" href="css/reset.css">    <link rel="stylesheet" href="css/slide1.css"></head><body>    <div id="slide1">        <div class="hd slide1_hd">            <ul>                <li></li>                <li></li>                <li></li>                <li></li>            </ul>        </div>        <div class="bd slide1_bd">            <ul>                <li>                    <a href="###">                        <img src="1.jpg" alt="">                    </a>                </li>                <li>                    <a href="###">                        <img src="12.jpg" alt="">                    </a>                </li>                <li>                    <a href="###">                        <img src="3.png" alt="">                    </a>                </li>                <li>                    <a href="###">                        <img src="4.png" alt="">                    </a>                </li>            </ul>        </div>        <a href="javascript:void(0);" class="prev"><</a>        <a href="javascript:void(0);" class="next">></a>    </div>    <script type="text/javascript">        jQuery("#slide1").slide({            titleCell:".slide1_hd ul",            mainCell:".slide1_bd ul",            effect:"fade",            autoPlay:"true"        })    </script></body></html>

样式是使用的scss

// banner图片的大小$banner_width:800px;$banner_height:400px;// hd的宽高 宽度设置的宽一点居中可以包含更多的li$banner_hd_width:300px;$banner_hd_height:20px;$banner_hd_li_width:16px;#slide1 {    margin: 100px;    width: $banner_width;    height: $banner_height;    border: 1px solid #ccc;    position: relative;    overflow:hidden;    background-color:#f0f2f7;    .slide1_hd {        position: absolute;        bottom: 22px;        font-size: 0;        overflow: hidden;        width: 100%;        height:$banner_hd_height;        z-index: 1;        ul {            overflow: hidden;            width: $banner_hd_width;            height:$banner_hd_height;            margin: 0 auto;            text-align: center;            li {                width: ($banner_hd_li_width - 2);                height: ($banner_hd_li_width - 2);                display: inline-block;                margin-right: 5px;                cursor: pointer;                border: 1px solid #fff;                border-radius: 100%;                background-color:#B8B8B8;            }            .on {                background-color: #f60;            }        }    }    .slide1_bd {        width: 100%;        height: 100%;        position:relative;        ul {            width: 100%;            height: 100%;        }    }    .prev,    .next {        height: 88px;        width: 38px;        position: absolute;        top: 50%;        margin-top: -44px;        display: block;        background-color: #8B8B7A;        color: #fff;        font-size: 30px;        line-height: 88px;        text-align: center;        opacity: 0.5;        filter: alpha(opacity=50);        display: none;        &:hover{            opacity: 0.7;            filter: alpha(opacity=70);        }    }    .prev {        left: 20px;    }    .next {        right: 20px;    }    &:hover {        .prev,        .next {            display: block;        }    }}

使用总结
1. 父级不需要设置高度用内容撑开
2. img承载的父标签使用固定宽高 overflow：hidden，然后设置img的宽高都是 100%
3. banner图的问题设置hd的宽度为一个比较宽的宽度设置text-align:center font-size:0; 里面的li设置成display:inline-block(li 不要使用float：left)
4. 图片的另一种显示居中方式

 div>a>img    div{            width: 300px;            height: 300px;            background: #ccc;            display: table-cell;            vertical-align: middle;            text-align: center;            overflow: hidden;        }        div>    a{            font-size: 0;            display: inline-block;            width: 100%;        }    div img{            width: 100%;            transition: all 0.8s;        }

text-align:center 对块级元素有效
设置a标签为display: block 在把 font-size:0 能够使a标签的宽最大
不适用 placeholder使用js实现输入框的提示信息
注意onblur 和 onfocus要使用分号结束

0 0