代码使用指南

您所在的位置:网站首页 建站相关 代码使用指南  

滚动图片

2016-9-30|发布:合元网络|点击数: 1231

    <style type="text/css">
    .bbf_slide_lr_1 {
            margin-bottom:10px;
        padding: 5px 35px;
        position: relative;
        border:1px solid #ccc;
        border-right:none;
        border-radius:5px;
    }
    ul.slideshow li {
        float: left;
        overflow: hidden;
        padding: 0 3px;
        text-align: center;
    }
    ul.slideshow li a{ display:block;}
    .slidebarbtn {
        display: block;
        font-family: Geneva,sans-serif;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        position: absolute;
        text-align: center;
        width: 28px;
    }

    .slidebarbtn:hover {
        text-decoration: none;
    }
    .slidebarbtn {
        background: none repeat scroll 0 0 #f2f2f2;
        border: 1px solid #cdcdcd;
        color: #333;
            border-radius: 5px;
    }
    .slidebarbtn:hover {
        background: none repeat scroll 0 0 #fcc9a4;
        border: 1px solid #cdcdcd;
        color: #fff;
    }
    .slidebarup {
        left: 5px;
        top: 66px;
    }
    .slidebardown {
        right: 5px;
        top: 66px;
    }
            
    .bbf_slide_lr_1  span,.bbf_slide_lr_1 em  { position:absolute; left:3px; bottom:0; height:40px ; text-indent:5px; line-height:40px; font-size:16px;  color:#000; overflow:hidden; }
    .ie_all .bbf_slide_lr_1 span, .ie_all .bbf_slide_lr_1 em  { bottom:0px; }
    .bbf_slide_lr_1  span { background-color:#fff; opacity:.4;filter:alpha(opacity=40); }
    .bbf_slide_lr_1  a:hover span { background-color:#000; }
    .bbf_slide_lr_1  li:hover em { color:#fff; text-decoration:none; }
    .bbf_slide_lr_1  em:hover { color:#fff; text-decoration:none; }
            
    </style>
    <div class="slidebox bbf_slide_lr_1" slidenum="4" slidestep="3" > <!--4个,每次滚动3个-->
    <a class="slidebarbtn leftbtn slidebarup" mevent="click" href="javascript:void(0);"> <</a>
    <div class="middle cl" >
            <ul class="slideshow">
            [loop]
            <li style="width: {picwidth}px;">
        <a href="{url}" {target} title="{title}"><img src="{pic}" width="{picwidth}px" height="{picheight}px" alt="{title}" /> <span></span><em style="width:{picwidth}px;">{title}</em> </a>
        </li>
        [/loop]
        </ul>
    </div>
    <a class="slidebarbtn rightbtn slidebardown" mevent="click" href="javascript:void(0);">> </a>
    </div>

    <script type="text/javascript">
    runslideshow();
    </script>

 

 

下一篇:图片切换
分享到:
CopyRight 2012-2017 合元网络 版权所有
公司地址:郑州市高新区升龙又一城A区2号楼2单元17楼 热线电话:15303843903 技术QQ:1808040020 微 信:15303843903 豫ICP备14027215号