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

最新推荐文章于 2024-08-15 10:17:37 发布

原创最新推荐文章于 2024-08-15 10:17:37 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#superslide #banner图

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Superslide插件轻松创建轮播图，包括无需设置父级高度、图片容器固定宽高并隐藏溢出、图片居中显示等技巧。通过设置hd宽度、text-align和display属性，实现轮播图的灵活布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里使用的插件是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要使用分号结束