热搜：编程 Python Microsoft 编程语言 C++

JS+CSS原生带缩略图的焦点图幻灯片

发布时间：2023-01-01 01:15:35 来源：网络

.

只有相信自己的目标，努力工作和奋斗的人才能取得最终的成功。但是我一直相信的一件事是，当您触摸自己哭泣时，您就成功了！

为了给增强插件添加一个右下角缩略图的广告位，在网站找部份的JS代码，然后发生现JS里面竟然存在一些木马一类的代码，这里严重鄙视一下那些收费下载的资源站，收费就收费了，不好好严控把关每一个资源的安全性，还挂着什么无毒的标识，这里不曝光网站名了。

自己参考网上的资源写了一个，效果还不错。

种纯生的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 rel="nofollow" href="http://www.feiniaomy.com" target="_blank">
                <img src="img/1.png">
            </a>
        </div>
        <div id="con_tophome_2" style="display: none;">
            <a rel="nofollow" href="http://www.feiniaomy.com" target="_blank">
                <img src="img/2.png">
            </a>
        </div>
        <div id="con_tophome_3" style="display: none;">
            <a rel="nofollow" href="http://www.feiniaomy.com" target="_blank">
                <img src="img/3.png">
            </a>
        </div>
        <div id="con_tophome_4" style="display: none;">
            <a rel="nofollow" href="http://www.feiniaomy.com" 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 rel="nofollow" href="javascript：:;" onmousemove="setTab('tophome',4,1,'out','on');">
                <img src="img/1.png">
            </a>
        </li>
        <li id="tab_tophome_2" class="on">
            <a rel="nofollow" href="javascript：:;" onmousemove="setTab('tophome',4,2,'out','on');">
                <img src="img/2.png">
            </a>
        </li>
        <li id="tab_tophome_3" class="on">
            <a rel="nofollow" href="javascript：:;" onmousemove="setTab('tophome',4,3,'out','on');">
                <img src="img/3.png">
            </a>
        </li>
        <li id="tab_tophome_4" class="on">
            <a rel="nofollow" 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";
}

演示代码下载

[Downloads]下载内容[/Downloads]

到此这篇关于JS+CSS原生带缩略图的焦点图幻灯片就介绍到这了。路只能走一步是一步，因为明天难以预测，过去已成定局，除了把握好当下，其实别无它。更多相关JS+CSS原生带缩略图的焦点图幻灯片内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章: