jquery幻灯片插件bxslider样式改进实例

前端之家收集整理的这篇文章主要介绍了jquery幻灯片插件bxslider样式改进实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jquery幻灯片插件bxslider样式改进方法分享给大家供大家参考。具体如下:

对比了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动。

但是官方提供的显示效果真的很难看,让人难以接受。最后只能自己DIY了。

bxslider官方样式如下:

改造后的样式如下:

第一步:引入bxslider

代码如下:

第二步:加入bxslider HTML代码

代码如下:

原版官方的html代码是这样的:

代码如下:

    在此基础上创建了一个slider_block的父层DIV,设置position为relative,主要是为子层slider-pager的绝对定位翻页“1,2,3”。

    第三步:修改CSS jquery.bxslider.css,增加slider-pager的CSS样式优化

    代码如下:
    /去掉阴影效果,浏览器不兼容 by 4jcms /
    /*.bx-wrapper .bx-viewport {
    -moz-Box-shadow: 0 0 5px #ccc;
    -webkit-Box-shadow: 0 0 5px #ccc;
    Box-shadow: 0 0 5px #ccc;
    border: solid #fff 5px;
    left: -5px;
    background: #fff;
    }

    */

    slider_block{position: relative;margin: 0 auto;height: 245px;margin-top:10px;overflow:hidden;}

    slider-pager{position: absolute;bottom: 10px;right: 10px;z-index: 999;font-size: 0px;}

    slider-pager .pager-link {float: left;width: 15px;height: 15px;line-height: 15px;text-align: center;margin: 0 0 0 10px;background: #FC0;color: #930;}

    slider-pager .active {background: #0C3;color: #fff;}

    /*去掉阴影效果,浏览器不兼容 by 4jcms */ /*.bx-wrapper .bx-viewport { -moz-Box-shadow: 0 0 5px #ccc; -webkit-Box-shadow: 0 0 5px #ccc; Box-shadow: 0 0 5px #ccc; border: solid #fff 5px; left: -5px; background: #fff; } */

    最后改造完毕

    原文链接:https://www.f2er.com/jquery/57552.html

    猜你在找的jQuery相关文章