只有相信自己的目标，努力工作和奋斗的人才能取得最终的成功。但是我一直相信的一件事是，当您触摸自己哭泣时，您就成功了！
为了给增强插件添加一个右下角缩略图的广告位，在网站找部份的JS代码，然后发生现JS里面竟然存在一些木马一类的代码，这里严重鄙视一下那些收费下载的资源站，收费就收费了，不好好严控把关每一个资源的安全性，还挂着什么无毒的标识，这里不曝光网站名了。
自己参考网上的资源写了一个，效果还不错。
种纯生的JS代码，可以点击缩略图的情况下，显示对应的大图，如果不点击，可以自动切换。另外，可以使用JS cookies 控制这个焦点图位置的显示与隐藏。
先上效果图
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原生带缩略图的焦点图 幻灯片内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
