為了給增強插件添加一個右下角縮略圖的廣告位,在網站找部份的JS代碼,然后發生現JS里面竟然存在一些木馬一類的代碼,這里嚴重鄙視一下那些收費下載的資源站,收費就收費了,不好好嚴控把關每一個資源的安全性,還掛著什么無毒的標識,這里不曝光網站名了。

自己參考網上的資源寫了一個,效果還不錯。

国产视频app種純生的JS代碼,可以點擊縮略圖的情況下,顯示對應的大圖,如果不點擊,可以自動切換。另外,可以使用JS cookies 控制這個焦點圖位置的顯示與隱藏。

先上效果圖

JS+CSS原生帶縮略圖的焦點圖 幻燈片

JS+CSS原生帶縮略圖的焦點圖部份代碼

HTML代碼

<div class="mochu_theme_banner" id="banner">
    <span class="mochu_theme_adh_close" style="display: block;">關閉</span>
    <div class="mochu_theme_HadD">
        <div id="con_tophome_1" style="display: block;">
            <a href="http://xswdd.cn" target="_blank">
                <img src="img/1.png">
            </a>
        </div>
        <div id="con_tophome_2" style="display: none;">
            <a href="http://xswdd.cn" target="_blank">
                <img src="img/2.png">
            </a>
        </div>
        <div id="con_tophome_3" style="display: none;">
            <a href="http://xswdd.cn" target="_blank">
                <img src="img/3.png">
            </a>
        </div>
        <div id="con_tophome_4" style="display: none;">
            <a href="http://xswdd.cn" target="_blank">
                <img src="img/4.png">
            </a>
        </div>
        <div class="clearasdf"></div>
    </div>
    <ul class="mochu_theme_banner_tab clearfix">
        <li id="tab_tophome_1" class="on">
            <a href="javascript::;" onmousemove="setTab('tophome',4,1,'out','on');">
                <img src="img/1.png">
            </a>
        </li>
        <li id="tab_tophome_2" class="on">
            <a href="javascript::;" onmousemove="setTab('tophome',4,2,'out','on');">
                <img src="img/2.png">
            </a>
        </li>
        <li id="tab_tophome_3" class="on">
            <a href="javascript::;" onmousemove="setTab('tophome',4,3,'out','on');">
                <img src="img/3.png">
            </a>
        </li>
        <li id="tab_tophome_4" class="on">
            <a href="javascript::;" onmousemove="setTab('tophome',4,4,'out','on');">
                <img src="img/4.png">
            </a>
        </li>
        <div class="clearasdf"></div>
    </ul>
</div>

JS代碼

function setTab(name, itemCnt, curItem, classHide,classShow) {
    for (i = 1; i <= itemCnt; i++) {
        eval("document.getElementById(\'tab_" + name + "_" + i + "\').className=\'" + classHide + "\'");
    }
    eval("document.getElementById(\'tab_" + name + "_" + curItem + "\').className=\'" + classShow + "\'");
    for (i = 1; i <= itemCnt; i++) {
        eval("ele_hide = document.getElementById(\'con_" + name + "_" + i + "\')");
        if (ele_hide) ele_hide.style.display = "none";
    }
    eval("ele_play = document.getElementById(\'con_" + name + "_" + curItem + "\')");
    if (ele_play) ele_play.style.display = "block";
}

演示代碼下載

js原生帶縮略圖焦點圖 幻燈片平臺 : 所有平臺  |  分類 : 編程開發  |  大小 : 0.3 MB