代码使用指南

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

图片切换

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

    <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;
    }
    .bbf_slide_lr_1 li {
        float: left;
        overflow: hidden;
        padding: 0 3px;
        text-align: center;
    }
    .bbf_slide_lr_1 li a {
            display: block;
    }
    .bbf_slide_lr_1 .slidebarbtn {
        display: block;
        font-family: Geneva,sans-serif;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        position: absolute;
        text-align: center;
        width: 28px;
        background: none repeat scroll 0 0 #f2f2f2;
        border: 1px solid #cdcdcd;
        color: #333;
            border-radius: 5px;
    }
    .bbf_slide_lr_1 .slidebarbtn:hover {
        text-decoration: none;
    }
    .bbf_slide_lr_1 .slidebarbtn:hover {
        background: none repeat scroll 0 0 #fcc9a4;
        border: 1px solid #cdcdcd;
        color: #fff;
    }
    .bbf_slide_lr_1 .slidebarup {
        left: 5px;
        top: 66px;
    }
    .bbf_slide_lr_1 .slidebardown {
        right: 5px;
        top: 66px;
    }        
    .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;
            background-color: #fff;
            opacity: .4;filter:alpha(opacity=40);
    }
    .bbf_slide_lr_1 a:hover em {
            background-color: #000;
    }
    .bbf_slide_lr_1 li:hover em {
            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}" /><em>{title}</em> </a>
        </li>
        [/loop]
            [index=1]
            <li style="width: {picwidth}px;">
            <style type="text/css">
            .slidebarup,.slidebardown {top:top:calc({picheight}px/2 - 35px);top:-moz-calc({picheight}px/2 - 35px);top:-webkit-calc({picheight}px/2 - 35px);}
            .bbf_slide_lr_1 em {width:{picwidth}px;}
            </style>
            <a href="{url}" {target} title="{title}"><img src="{pic}" width="{picwidth}px" height="{picheight}px" alt="{title}" /><em>{title}</em></a>
            </li>
            [/index]
        </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号