标签云+轮播效果

HTML

<div class="left">
            <img src="img/small_bj.jpg" alt="" />
            <div>
                <ul class="marks" nn="1" sl="0" st="0">
                    <li si="36" l="90" t="35" o="0.8">
                        <a href="" target="_blank">建筑施工</a>
                    </li>
                    <li si="28" l="95" t="350" o="0.6">
                        <a href="" target="_blank">工程监理</a>
                    </li>
                    <li si="29" l="216" t="126" o="0.9">
                        <a href="" target="_blank">招标代理</a>
                    </li>
                    <li si="29" l="400" t="30" o="0.8">
                        <a href="" target="_blank">质量检测</a>
                    </li>
                    <li si="32" l="510" t="200" o="0.8">
                        <a href="" target="_blank">造价咨询</a>
                    </li>
                    <li si="32" l="410" t="380" o="0.8">
                        <a href="" target="_blank">工程勘察</a>
                    </li>
                    <li si="35" l="680" t="300" o="0.9">
                        <a href="" target="_blank">工程设计</a>
                    </li>
                    <li si="35" l="740" t="50" o="0.7">
                        <a href="" target="_blank">审图机构</a>
                    </li>
                    <li si="30" l="100" t="250" o="0.6">
                        <a href="" target="_blank">园林绿化</a>
                    </li>
                    <li si="24" l="750" t="140" o="0.8">
                        <a href="" target="_blank">规划编制</a>
                    </li>
                    <li si="34" l="170" t="450" o="0.8">
                        <a href="" target="_blank">房地产开发</a>
                    </li>
                    <li si="36" l="330" t="260" o="0.6">
                        <a href="" target="_blank">物业管理</a>
                    </li>
                    <li si="35" l="472" t="98" o="0.8">
                        <a href="" target="_blank">估价机构</a>
                    </li>
                    <li si="35" l="593" t="440" o="0.7">
                        <a href=" target=" _blank ">安全生产许可</a>
                    </li>
                </ul>
                <ul class="marks " nn="2 " sl="900 " st="360 ">
                    <li si="38 " l="100 " t="200 " o="0.8 ">
                        <a href=" " target="_blank ">一级建造师</a>
                    </li>
                    <li si="39 " l="200 " t="50 " o="0.6 ">
                        <a href=" " target="_blank ">二级建造师</a>
                    </li>
                    <li si="29 " l="300 " t="426 " o="0.7 ">
                        <a href=" " target="_blank ">工程监理师</a>
                    </li>
                    <li si="29 " l="460 " t="30 " o="0.8 ">
                        <a href=" " target="_blank ">建筑师</a>
                    </li>
                    <li si="46 " l="110 " t="450 " o="0.8 ">
                        <a href=" " target="_blank ">结构师</a>
                    </li>
                    <li si="32 " l="679 " t="60 " o="0.8 ">
                        <a href=" " target="_blank ">造价师</a>
                    </li>
                    <li si="35 " l="650 " t="290 " o="0.8 ">
                        <a href=" " target="_blank ">三类人员</a>
                    </li>
                    <li si="35 " l="290 " t="258 " o="0.7 ">
                        <a href=" " target="_blank ">施工员</a>
                    </li>
                    <li si="30 " l="100 " t="123 " o="0.5 ">
                        <a href=" " target="_blank ">资料员</a>
                    </li>
                    <li si="24 " l="700 " t="180 " o="0.8 ">
                        <a href=" " target="_blank ">测量员</a>
                    </li>
                    <li si="34 " l="480 " t="290 " o="0.8 ">
                        <a href=" " target="_blank ">试验员</a>
                    </li>
                    <li si="40 " l="760 " t="3 " o="0.6 ">
                        <a href=" " target="_blank ">劳务员</a>
                    </li>
                    <li si="35 " l="472 " t="98 " o="0.8 ">
                        <a href=" " target="_blank ">监理员</a>
                    </li>
                    <li si="26 " l="593 " t="190 " o="0.4 ">
                        <a href=" " target="_blank ">材料员</a>
                    </li>
                    <li si="30 " l="472 " t="210 " o="0.7 ">
                        <a href=" " target="_blank ">标准员</a>
                    </li>
                    <li si="35 " l="30 " t="53 " o="0.7 ">
                        <a href=" " target="_blank ">质量员</a>
                    </li>
                    <li si="25 " l="150 " t="350 " o="0.8 ">
                        <a href=" " target="_blank ">安全员</a>
                    </li>
                    <li si="24 " l="345 " t="180 " o="0.6 ">
                        <a href=" " target="_blank ">机械员</a>
                    </li>
                    <li si="34 " l="730 " t="120 " o="0.4 ">
                        <a href=" " target="_blank ">造价员</a>
                    </li>
                    <li si="24 " l="560 " t="389 " o="0.9 ">
                        <a href=" " target="_blank ">物业管理</a>
                    </li>
                    <li si="30 " l="492 " t="440 " o="0.6 ">
                        <a>产权产籍</a>
                    </li>
                    <li si="28 " l="713 " t="420 " o="0.6 ">
                        <a>商品房销售</a>
                    </li>
                </ul>
                <ul class="marks " nn="3 " sl="900 " st="0 ">
                    <li si="36 " l="100 " t="150 " o="0.8 ">
                        <a href=" " target="_blank ">项目基本信息</a>
                    </li>
                    <li si="31 " l="80 " t="50 " o="0.6 ">
                        <a>单位工程信息</a>
                    </li>
                    <li si="29 " l="300 " t="126 " o="0.6 ">
                        <a href=" " target="_blank ">选址意见书</a>
                    </li>
                    <li si="24 " l="400 " t="30 " o="0.8 ">
                        <a href=" " target="_blank ">建设用户规划许可证</a>
                    </li>
                    <li si="26 " l="420 " t="200 " o="0.8 ">
                        <a href=" " target="_blank ">建设工程规划许可证</a>
                    </li>
                    <li si="25 " l="520 " t="460 " o="0.8 ">
                        <a>施工图审查信息</a>
                    </li>
                    <li si="35 " l="330 " t="330 " o="0.8 ">
                        <a>建筑节能信息</a>
                    </li>
                    <li si="35 " l="40 " t="253 " o="0.7 ">
                        <a>项目报建信息</a>
                    </li>
                    <li si="30 " l="770 " t="110 " o="0.5 ">
                        <a>招标信息</a>
                    </li>
                    <li si="24 " l="680 " t="160 " o="0.8 ">
                        <a>中标信息</a>
                    </li>
                    <li si="34 " l="590 " t="260 " o="0.8 ">
                        <a>合同备案信息</a>
                    </li>
                    <li si="38 " l="650 " t="400 " o="0.6 ">
                        <a>施工许可信息</a>
                    </li>
                    <li si="35 " l="472 " t="98 " o="0.8 ">
                        <a>质量监督信息</a>
                    </li>
                    <li si="35 " l="130 " t="460 " o="0.4 ">
                        <a>安全监督信息</a>
                    </li>
                    <li si="28 " l="13 " t="350 " o="0.4 ">
                        <a>竣工备案信息</a>
                    </li>
                </ul>
            </div>
            <!--切换按钮-->
            <ul class="mark_btn ">
                <li>
                    <a class="cur " nn="1 ">企业数据</a>
                </li>
                <li>
                    <a nn="2 ">从业人员数据</a>
                </li>
                <li>
                    <a nn="3 ">工程项目数据</a>
                </li>
            </ul>
        </div>

CSS

/*index样式*/
html, body
{
    width: 100%;
    height: 100%;
    min-width: 1280px;
    background: url(../img/hw_bj.jpg);
    font-family: "Microsoft YaHei";
    margin: 0;
    padding: 0;
}
li
{
    list-style: none;
}
a
{
    text-decoration: none;
    color: #fffefd;
    outline: none;
}
/*标签云*/
.left
{
    width: 950px;
    height: 603px;
    margin: 50px auto;
    position: relative;
    overflow:hidden;
}
.left div
{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
.left img
{
    height:100%; 
    width:100%;
}
.marks
{
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    width: 1100px;
    height: 360px;
}
.marks li
{
    font-size: 9px;
    display: none;
    left: 0px;
    top: 0px;
    color: #FFF;
    position: absolute;
}
.marks li a
{
    color:#00b9ef;
    text-decoration:none;
    cursor: pointer;
    transition: color 1s;
    display: block;
    font-family:微软雅黑;
    transition:color 1s ease;
}
.marks li a:hover
{ 
    font-size:50px;
    color:#CC0000;
}

/*标签云按钮*/
.mark_btn
{
    position: absolute;
    bottom: 10px;
    left: 20px;
    height: 24px;
}
.mark_btn li
{
    float: left;
    height: 24px;
    padding-right: 10px;
}
.mark_btn li a
{
    display: block;
    height: 22px;
    line-height: 22px;
    padding: 0px 15px;
    background: #FFF;
    cursor: pointer;
    border-radius: 6px;
    color: #666;
    border:1px solid #ffc446;
}
.mark_btn li a:hover, .mark_btn li a.cur
{
    background: #ffc446;
    color: #FFF;
}

JavaScript

$(function() {

    $(".mark_btn li a").click(function() {
        nn = $(this).attr("nn");
        shows();
    });
    startMyPlay();
    myST = window.setInterval(function() {
        startMyPlay()
    }, 3000);
    $(".left").mouseenter(function() {
        //指向时停止轮循
        stopMyPlay();
    }).mouseleave(function() {
        //离开时继续轮循 
        myST = window.setInterval(function() {
            startMyPlay()
        }, 3000);
    });
});

var nn = 0,
    myST;

function startMyPlay() {
    nn++;
    if(nn > 3) nn = 1;
    shows();
}

function stopMyPlay() {
    window.clearInterval(myST);
}

function shows() {
    $(".mark_btn li a").removeClass("cur");
    $(".mark_btn li a[nn=" + nn + "]").addClass("cur");
    var mUl = $(".marks[nn=" + nn + "]");
    mUl.show().siblings().hide();
    var sl = mUl.attr("sl"),
        st = mUl.attr("st");

    mUl.find("li").each(function() {
        var l = $(this).attr("l");
        var t = $(this).attr("t");
        var si = $(this).attr("si");
        var o = $(this).attr("o");
        $(this).show().css({
            opacity: "0",
            left: sl + "px",
            top: st + "px",
            fontSize: "8px"
        }).animate({
            opacity: o,
            left: l + "px",
            top: t + "px",
            fontSize: si + "px"
        }, 1000);
    });
}