{"status":true,"html":"
\n
\n \n
\n
\n
<\/i>\u8fd4\u56de<\/a><\/div>\n
    \n
  1. \u8bfe\u7a0b\u95ee\u7b54<\/a><\/li>\n
  2. \u95ee\u7b54\u8be6\u60c5<\/li>\n <\/ol>\n <\/div>\n \n
    \n
    \n \n \n \n <\/a>\n \n <\/i>\n <\/a>\n <\/div>\n
    \n
    \n
    \n <\/i>2014-11-09 11:26:15<\/span>\n <\/div>\n
    1449253774<\/a>[\u672c\u8bfe\u7a0b\u7528\u6237\u7684\u63d0\u95ee]<\/span><\/div>\n <\/div>\n
    \n

    \u524d\u7aef<\/h3>\n

    ht****\t<\/span><\/p>


    <\/p>

    <!DOCTYPE ht**** PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xht****1\/DTD\/xht****1-transitional.dtd">
    <ht**** x****ns="http:\/\/www.w3.org\/1999\/xht****">
    <head>
    <meta http-equiv="Content-Type" content="text\/ht****; charset=utf-8" \/>
    <title>\u65e0\u6807\u9898\u6587\u6863<\/title>
    <link type="text\/css" href="2.css" rel="stylesheet">
    <link type="text\/javascript" href="3.js">
    <link type="text\/javascript" href="jquery.js">
    <\/head>


    <body>
        <div  id="focus">
            <ul>
            <li><img src="demo5.png"><\/li>
            <li><img src="demo5.png"><\/li>
            <li><img src="demo5.png"><\/li>
            <li><img src="demo5.png"><\/li>
            <li><img src="demo5.png"><\/li>
            <li><img src="demo5.png"><\/li>
            <li><img src="demo5.png"><\/li>
            
            <\/ul>
        <\/div>








    <\/body>
    <\/ht****>
    <\/p>


    <\/p>

    CSS<\/p>


    <\/p>

    @charset "utf-8";
    \/* CSS Document *\/
    ul li{list-display:none;}
    .banner{width:330px;height:350px;}
    #focus {width:300px; height:350px; overflow:hidden; position:relative;margin:0 auto;}
    #focus ul {height:350px; position:absolute;}
    #focus ul li {float:left; width:300px; height:350px; overflow:hidden; position:relative;}
    #focus ul li div {position:absolute; overflow:hidden;}
    #focus .btnBg {position:absolute; width:300px; height:20px; left:0; bottom:0;}
    #focus .btn {position:absolute; width:30px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;}
    #focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer;}
    #focus .btn span.on {background:#fff;}


    <\/p>


    <\/p>

    JS<\/p>


    <\/p>

    $(function() {
    \t<\/span>var sWidth = $("#focus").width(); \/\/\u83b7\u53d6\u7126\u70b9\u56fe\u7684\u5bbd\u5ea6\uff08\u663e\u793a\u9762\u79ef\uff09
    \t<\/span>var len = $("#focus ul li").length; \/\/\u83b7\u53d6\u7126\u70b9\u56fe\u4e2a\u6570
    \t<\/span>var index = 0;
    \t<\/span>var picTimer;
    \t<\/span>
    \t<\/span>\/\/\u4ee5\u4e0b\u4ee3\u7801\u6dfb\u52a0\u6570\u5b57\u6309\u94ae\u548c\u6309\u94ae\u540e\u7684\u534a\u900f\u660e\u6761\uff0c\u8fd8\u6709\u4e0a\u4e00\u9875\u3001\u4e0b\u4e00\u9875\u4e24\u4e2a\u6309\u94ae
    \t<\/span>var btn = "<div class='btnBg'><\/div><div class='btn'>";
    \t<\/span>for(var i=0; i < len; i++) {
    \t\t<\/span>btn += "<span><\/span>";
    \t<\/span>}
    \t<\/span>btn += "<\/div><div class='preNext pre'><\/div><div class='preNext next'><\/div>";
    \t<\/span>$("#focus").append(btn);
    \t<\/span>$("#focus .btnBg").css("opacity",0.5);
     
    \t<\/span>\/\/\u4e3a\u5c0f\u6309\u94ae\u6dfb\u52a0\u9f20\u6807\u6ed1\u5165\u4e8b\u4ef6\uff0c\u4ee5\u663e\u793a\u76f8\u5e94\u7684\u5185\u5bb9
    \t<\/span>$("#focus .btn span").mouseenter(function() {
    \t\t<\/span>index = $("#focus .btn span").index(this);
    \t\t<\/span>showPics(index);
    \t<\/span>}).eq(0).trigger("mouseenter");
     
    \t<\/span>\/\/\u4e0a\u4e00\u9875\u3001\u4e0b\u4e00\u9875\u6309\u94ae\u900f\u660e\u5ea6\u5904\u7406
    \t<\/span>$("#focus .preNext").css("opacity",0.2).hover(function() {
    \t\t<\/span>$(this).stop(true,false).animate({"opacity":"0.5"},300);
    \t<\/span>},function() {
    \t\t<\/span>$(this).stop(true,false).animate({"opacity":"0.2"},300);
    \t<\/span>});
     
    \t<\/span>\/\/\u4e0a\u4e00\u9875\u6309\u94ae
    \t<\/span>$("#focus .pre").click(function() {
    \t\t<\/span>index -= 1;
    \t\t<\/span>if(index == -1) {index = len - 1;}
    \t\t<\/span>showPics(index);
    \t<\/span>});
     
    \t<\/span>\/\/\u4e0b\u4e00\u9875\u6309\u94ae
    \t<\/span>$("#focus .next").click(function() {
    \t\t<\/span>index += 1;
    \t\t<\/span>if(index == len) {index = 0;}
    \t\t<\/span>showPics(index);
    \t<\/span>});
     
    \t<\/span>\/\/\u672c\u4f8b\u4e3a\u5de6\u53f3\u6eda\u52a8\uff0c\u5373\u6240\u6709li\u5143\u7d20\u90fd\u662f\u5728\u540c\u4e00\u6392\u5411\u5de6\u6d6e\u52a8\uff0c\u6240\u4ee5\u8fd9\u91cc\u9700\u8981\u8ba1\u7b97\u51fa****ul\u5143\u7d20\u7684\u5bbd\u5ea6
    \t<\/span>$("#focus ul").css("width",sWidth * (len));
    \t<\/span>
    \t<\/span>\/\/\u9f20\u6807\u6ed1\u4e0a\u7126\u70b9\u56fe\u65f6\u505c\u6b62\u81ea\u52a8\u64ad\u653e\uff0c\u6ed1\u51fa\u65f6\u5f00\u59cb\u81ea\u52a8\u64ad\u653e
    \t<\/span>$("#focus").hover(function() {
    \t\t<\/span>clearInterval(picTimer);
    \t<\/span>},function() {
    \t\t<\/span>picTimer = setInterval(function() {
    \t\t\t<\/span>showPics(index);
    \t\t\t<\/span>index++;
    \t\t\t<\/span>if(index == len) {index = 0;}
    \t\t<\/span>},4000); \/\/\u6b642000\u4ee3\u8868\u81ea\u52a8\u64ad\u653e\u7684\u95f4\u9694\uff0c\u5355\u4f4d\uff1a\u6beb\u79d2
    \t<\/span>}).trigger("mouseleave");
    \t<\/span>
    \t<\/span>\/\/\u663e\u793a\u56fe\u7247\u51fd\u6570\uff0c\u6839\u636e\u63a5\u6536\u7684index\u503c\u663e\u793a\u76f8\u5e94\u7684\u5185\u5bb9
    \t<\/span>function showPics(index) { \/\/\u666e\u901a\u5207\u6362
    \t\t<\/span>var nowLeft = -index*sWidth; \/\/\u6839\u636eindex\u503c\u8ba1\u7b97ul\u5143\u7d20\u7684left\u503c
    \t\t<\/span>$("#focus ul").stop(true,false).animate({"left":nowLeft},300); \/\/\u901a\u8fc7animate()\u8c03\u6574ul\u5143\u7d20\u6eda\u52a8\u5230\u8ba1\u7b97\u51fa\u7684position
    \t\t<\/span>\/\/$("#focus .btn span").removeClass("on").eq(index).addClass("on"); \/\/\u4e3a\u5f53\u524d\u7684\u6309\u94ae\u5207\u6362\u5230\u9009\u4e2d\u7684\u6548\u679c
    \t\t<\/span>$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); \/\/\u4e3a\u5f53\u524d\u7684\u6309\u94ae\u5207\u6362\u5230\u9009\u4e2d\u7684\u6548\u679c
    \t<\/span>}
    });
    <\/p>


    <\/p>

    \u5c31\u662f\u56fe\u7247\u4e0d\u80fd\u5207\u6362\uff0c\u4e0d\u77e5\u9053\u662f\u600e\u4e48\u56de\u4e8b\uff1f\u6c42\u89e3\uff01<\/p>


    <\/p>


    <\/p>


    <\/p>


    <\/p>


    <\/p>


    <\/p>


    <\/p><\/p>\n <\/div>\n

    \n \n
    \n \n \u4e3e\u62a5<\/a>\n <\/span>\n \n <\/i>\u6536\u85cf\n <\/a>\n