真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

#banner_bg是圖片下方半透明的title背景圖
#banner_info里面內(nèi)容顯示圖片標(biāo)題
部分是右下方三個(gè)切換圖片的小按鈕
#banner_list里面是要輪播的三張圖片

CSS樣式：

#banner {position:relative; width:705px; height:240px; overflow:hidden; font-size:16px; margin:5px auto;} 
#banner_list img {border:0px;} 
#banner_bg {width:705px;position:absolute; color:#fff; bottom:0; background:url(../v2_p_w_picpaths/toumingbar.png);height:38px;z-index:1000;cursor:pointer; line-height:38px; font-size:14px;} 
#banner_info{position:absolute; bottom:0px; left:5px;height:38px; line-height:38px; color:#fff;z-index:1001;cursor:pointer} 
#banner ul {position:absolute;list-style-type:none; ;z-index:1002;margin:0; padding:0; bottom:8px; right:5px;} 
#banner ul li {width:18px; height:18px;float:left;display:block;cursor:pointer; margin:0px auto; background:url(../v2_p_w_picpaths/scropoint.png) no-repeat;overflow:hidden; color:#a3a1a2; font-size:9px; line-height:18px; text-align:center;} 
#banner ul li.on {background:url(../v2_p_w_picpaths/scropoint_on.png) no-repeat; color:#78e927;} 
#banner_list a{position:absolute;

JS部分：

 
    var n =0;  
    var t;  
    var count; //定義所需變量 
    $(function(){  
        $("li:first").addClass("on");  //給第一個(gè)按鈕加上選中樣式 
        count=$("#banner_list a").length; //為了讓HTML上的代碼可自動(dòng)循環(huán)就必須定義banner_list下所含圖片的長(zhǎng)度           
        $("#banner_list a:not(:first-child)").hide(); //讓除了不是第一張圖的隱藏掉 
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt')); //把圖片的alt屬性的值添加到標(biāo)題欄上去 
        $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")}); //點(diǎn)擊標(biāo)題另開新窗口打開對(duì)應(yīng)鏈接 
        var bli = $("#banner li");  
        bli.each(function(i){ //利用JQuery的遍歷實(shí)現(xiàn)點(diǎn)擊li的時(shí)候自動(dòng)切換到下一張 
            bli.eq(i).click(function(){  
            n = i;  
            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); 
            $("#banner_list a").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(500); //篩選出所有可見元素，然后取當(dāng)前點(diǎn)擊的fadeOut，其他的fadeIn 
            $(this).addClass("on"); //給所點(diǎn)擊的li加上樣式 
            $(this).siblings().removeAttr("class");  
                }); //移除同級(jí)li的樣式 
            }); 
            t = setInterval("showAuto()", 3000);  
            $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 3000);});  
    }) //設(shè)置自動(dòng)執(zhí)行時(shí)間為3s，利用setInterval自動(dòng)無限延時(shí)加載，同時(shí)鼠標(biāo)放上去后移除自動(dòng)加載效果，鼠標(biāo)移開后再繼續(xù)執(zhí)行輪播方法。 
  
    function showAuto()  
    {  
        n = n >=count?0 : ++n; //如果n>=圖片總個(gè)數(shù)的話重新賦值為0，也就是從頭算起，達(dá)到自動(dòng)切換到第一張的效果 
        $("#banner li").eq(n).trigger('click'); 
    } //在每一個(gè)匹配的li上綁定觸發(fā)click事件  
 

 現(xiàn)在發(fā)現(xiàn)這個(gè)圖片輪播在谷歌和FF瀏覽器下有bug，就是當(dāng)切換到別的標(biāo)簽頁(yè)的時(shí)候動(dòng)畫停止執(zhí)行了，等你再切換過來的時(shí)候會(huì)發(fā)現(xiàn)動(dòng)畫瘋狂執(zhí)行，可能是由于瀏覽器線程處理機(jī)制的問題，解決辦法是在動(dòng)畫執(zhí)行完畢之后加上JQuery的stop方法來停止被選元素所有加入隊(duì)列的動(dòng)畫，這樣，就算從另外一個(gè)標(biāo)簽頁(yè)切換回來，他會(huì)先停止執(zhí)行動(dòng)畫，然后再繼續(xù)執(zhí)行。

具體代碼如下：

在showAuto()方法里加上：

1.  function showAuto()  
2.     {  
3. $("#banner_list a").stop(true,true);
4.         n = n >=count?0 : ++n; //如果n>=圖片總個(gè)數(shù)的話重新賦值為0，也就是從頭算起，達(dá)到自動(dòng)切換到第一張的效果 
5.         $("#banner li").eq(n).trigger('click'); 
6.     } 

附上stop方法詳解：

定義和用法

stop() 方法停止當(dāng)前正在運(yùn)行的動(dòng)畫。

語(yǔ)法

$(selector).stop(stopAll,goToEnd)