欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

焦点图 全屏焦点图 上下滑动 有大用

1)引入 jquery.js
2)引入jquery.SuperSlide.2.1.1.js 见
附件 
3)使用的css

.fullSlide .hd ul li,
.knowledge_list li,
.list ul li,
.sublist li,
.nr_list li,
#contact_note, .caigoubtn
.userface {
    background-image: url(../images/split.png);  split.png /*见 附件 */
}
.fullSlide {
    min-width: 1200px;
    position: relative;
    height: 480px;
    overflow: hidden;
}

.fullSlide .bd {
    position: relative;
    z-index: 0;
}

.fullSlide .bd ul {
    width: 100%!important;
}

.fullSlide .bd li {
    width: 100%!important;
    height: 480px;
    background-position: center 0px!important;
}

.fullSlide .bd li .siteWidth {
    width: 1200px;
    position: relative;
    margin: 0 auto;
    height: 480px;
}

.fullSlide .bd li a {
    position: absolute;
    width: 100%;
    height: 480px;
    display: block;
    z-index: 1;
}

.fullSlide .bd .txt {
    position: absolute;
    width: 415px;
    top: 100px;
    left: 22px;
}

.fullSlide .hd {
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    height: 35px;
    text-align: center;
}
.hd ul{
    list-style: none;
}
.fullSlide .hd ul li {
    cursor: pointer;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 11px;
    height: 11px;
    margin: 4px;
    background-position: -313px 0px;
    overflow: hidden;
    line-height: 9999px;
    filter: alpha(opacity=40);
    opacity: 0.4;
}

.fullSlide .hd ul .on {
    filter: alpha(opacity=100);
    opacity: 1;
}
4)html代码
<div class="fullSlide">
    <div class="bd">
        <div class="tempWrap">
            <ul>
                <li style="background: url('/Public/PC/images/b1.jpg')" class="clone"></li>
                <li style="background: url('/Public/PC/images/b2.jpg')" class="clone"></li>
            </ul>
        </div>
    </div>
    <div class="hd">
        <ul></ul>
    </div>
    <script type="text/javascript">
        $(function() {
            jQuery(".fullSlide").slide({
                titCell: ".hd ul",
                mainCell: ".bd ul",
                effect: "topLoop",
                autoPlay: true,
                autoPage: true,
                trigger: "click"
            });
        })
    </script>
</div>


示例图 deom 图如下

附件大小
Plain text icon jquery.SuperSlide.2.1.1.js10.76 KB
Image icon split.png39.03 KB
普通分类: