您所在的位置:小祥子 » 编程 » JavaScript » 正文

基于jQuery扁平多颜色选项卡切换代码

时间:2015-07-31 编辑:拎壶充 来源:Cnblogs

基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

<div class="wrap">
        <div class="part1 clearfix">
            <div class="slide">
                <div class="slide_cont">
                    <ul class="clearfix">
                        <li style="background-color:#4ab9f3; "><img src="http://www.cnblogs.com/liaohuolin/p/images/banner_01.png" /></li>
                        <li style="background-color:#4fc34e; "><img src="http://www.cnblogs.com/liaohuolin/p/images/banner_02.png" /></li>
                        <li style="background-color:#ff852a; "><img src="http://www.cnblogs.com/liaohuolin/p/images/banner_03.jpg" /></li>
                        <li style="background-color:#dd3838; "><img src="http://www.cnblogs.com/liaohuolin/p/images/banner_04.png" /></li>
                        <li style="background-color:#a444d0; "><img src="http://www.cnblogs.com/liaohuolin/p/images/banner_05.png" /></li>
                    </ul>

                </div>
                <div class="slide_point">
                    <span class="cur_point point1">微信公众号一站式管理</span>
                    <span class="point2">网站完美兼容其他接口</span>
                    <span class="point3">微信粉丝互动营销利器</span>
                    <span class="point4">多种在线支付随你挑选</span>
                    <span class="point5">细化版本满足各行各业</span>
                </div>
            </div>
        </div>
    </div>

via:http://www.w2bc.com/article/53297

关键词:颜色 代码