适合SEO的图片幻灯,亮点:JS+引擎蜘蛛可读-领先建站CMS提供服务商我们专注于CMS建站产品的研发

57534 查看	99 回复

主题：适合SEO的图片幻灯,亮点:JS+引擎蜘蛛可读 [收藏主题] 本贴被认定为精华

转到：

q365 当前离线

130 主题	0 广播	1 粉丝

级别:一年级

用户积分:639 分
登录次数:149 次
注册时间:2011/2/3
最后登录:2016/5/8

q365 发表于：2011/3/22 8:00:39 | 只看该作者查看该作者主题楼主

做线上考试培训就选#科汛网校

一般的flash幻灯图片,是不会被搜索引擎读取的,有些JS幻灯链接写在JS代码里面,这样也不会被蜘蛛引擎读取,我找了很久适合SEO的幻灯代码,前台是可见的代码,引擎蜘蛛会读取,现在修改成支持KC使用,现在分享给大家.原创代码,您的留言是我发帖的动力.

看看本站实例:博雅网上菜:

模板部分分为 CSS DIV层布局 +JS调用

代码如下

复制代码

<div class="newflash">
<ul class="flashimg" id="SlayerA_1">{LB_首页幻灯}</ul>
<div class="flashBg">
<ul class="an" id="SlayerA_2">
<li class="flNa"><a href="javascript:;">1</a></li>
<li class="flNa"><a href="javascript:;">2</a></li>
<li class="flNa"><a href="javascript:;">3</a></li>
<li class="flNa"><a href="javascript:;">4</a></li>
<li class="flNa"><a href="javascript:;">5</a></li>
</ul>{LB_网站公告}
</div></div>
<SCRIPT type="text/javascript" language="JavaScript" src="/js/nx.js"></SCRIPT>
<script>ddSliderPlayers('SlayerA_1','SlayerA_2',6,'current');</script>
<style type="text/css">
.newflash{width:300px; height:255px;}
.flashimg img{float:left;width:300px;height:255px;}
.flashimg{float:left;width:300px;}
.flashBg{width:300px; background-color: #A69784;}
.an li{float:left;}
.an li a{background:#fff;color:#333;overflow:hidden;padding:0 3px;-webkit-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;}
.an li.current a,.an li a:hover{background:#ff6600;color:#fff; text-decoration:none;}
.an li a:hover{-webkit-transform: scale(1.4);-o-transform: scale(1.4);}
.flNa{padding: 2px;}
</style>

JS调用部分:保存成NX.JS放到上面模板路径正确

复制代码

function ddSliderPlayers(elementId,handleId, pauseTime, currentClassName) {
try {
if (typeof ddSliderPlayer == 'undefined')
ddSliderPlayer = {};
} catch (e) {
ddSliderPlayer = {};
}
var elementObj = document.getElementById(elementId);
var handler = document.getElementById(handleId);
ddSliderPlayer[elementId] = new DDSliderPlayer(elementObj, handler, pauseTime, currentClassName);
elementObj.onmouseover = function() {
ddSliderPlayer[elementId].pause();
}
elementObj.onmouseout = function() {
ddSliderPlayer[elementId].play();
};
return ddSliderPlayer;
}
function DDSliderPlayer(elementObj, handler, pauseTime, currentClassName) {
this.id = elementObj.id;
this.timer;
this.curScreen = 0;
this.elementObj = elementObj;
this.pauseTime = (undefined == pauseTime) ? 3000 : pauseTime * 1000;
this.currentClassName = (currentClassName == undefined) ? 'sel' : currentClassName;
this.pics = getElementsByClassName('flwi',elementObj);
this.handlers = getElementsByClassName('flNa',handler);
this.maxScreen = this.pics.length;
for (i=0;i<this.handlers.length;i++) {
this.handlers.setAttribute("index", i);
var id=this.id;
this.handlers[i].onmouseover=function(){
var u = this.getAttribute('index');
ddSliderPlayer[id].go(u).pause();
}
this.handlers[i].onmouseout=function(){
ddSliderPlayer[id].play();
}
}
this.go();
if (pauseTime)
this.play();
}
DDSliderPlayer.prototype.pause = function(){
this.pauseTime && clearInterval(this.timer);
this.timer = null;
};
DDSliderPlayer.prototype.play = function(){
if (!this.timer&&this.pauseTime) this.timer = setInterval('ddSliderPlayer.'+this.id+'.go()', this.pauseTime);
};
DDSliderPlayer.prototype.go = function(t){
this.curScreen = t===undefined ? this.curScreen : t;
this.curScreen %= this.maxScreen;
for (i=0;i<this.maxScreen;i++) {
if (i == this.curScreen) {
this.handlers[i].className = 'flNa '+this.currentClassName;
this.pics[i].style.display = '';
} else {
this.handlers[i].className = 'flNa';
this.pics[i].style.display = "none" ;
}
}
++this.curScreen;
return this;
}
function getElementsByClassName (className, parentElement){
if (typeof(parentElement)=='object') {
var elems = parentElement.getElementsByTagName("*");
} else {
var elems = (document.getElementById(parentElement)||document.body).getElementsByTagName("*");
}
var result=[];
for (i=0; j=elems[i]; i++) {
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1) {
result.push(j);
}
}
return result;
}
function ddHSlider(offX,eleid) {
document.getElementById(eleid).scrollLeft+=offX;
}