福州seo|福建seo >> 福州SEO优化 >> 网站焦点图的制作添加

网站焦点图的制作添加

作者:SEO技术 分类: 福州SEO优化 发布于:2015-7-30 10:29 ė590次浏览 60条评论
之前做网站的时候,觉得做一个flash或者焦点图放在网站上觉得特别的炫,客户也会比较容易接受。但后来接触SEO之后,发现这类操作对网站的优化来说并不好,主要原因是文件体积相对文本和图片来说比较大,代码复杂,动不动就上MB,导致网站打开速度比较慢,不利于优化,所以慢慢就建议客户不用这些了,除非客户有特别要求。

前段时间不小心发现了一个很小的焦点图代码,文件比较小,这里讲的很小是指它的文件大小和代码臃肿度,才几十KB,而且代码精简。立马就用上了,网站看起来更美观大方,同时也对网站的SEO影响也不大。具体效果可以看看本站首页右侧的焦点图哦。


现附上操作步骤:
1,在网站源码上加上相应的JS和CSS代码:<script type="text/javascript" src="[!--news.url--]js/myfocus-2.0.1.min.js" charset="utf-8"></script> (表时你用的是myfocus2.0.1版本的js)
<script type="text/javascript" src="[!--news.url--]js/mf-pattern/mF_fancy.js"></script>       
<link href="[!--news.url--]js/mf-pattern/mF_fancy.css" type="text/css" rel="stylesheet"/>  
后面这两个,一个是js代码,另一个是css对码,它们是成对出现的,对应是的样式fancy下的js和css。用户可以根据自己喜好选择相应的样式,每个样式都有相对应的js和css文件。

2, 代码
 <div class="content_right" id="picbox">
    <div class="pic">
    <ul>
      <li><img src="[!--news.url--]img/001.jpg" width="500" height="385" /></li>
      <li><img src="[!--news.url--]img/002.jpg" width="500" height="385"/></li>
      <li><img src="[!--news.url--]img/004.jpg" width="500" height="385"/></li>
    </ul>
    </div>
  </div>
这里要注意,在ul li的上面一定要有一个div,且class属性名一定要是pic.
3, 在源码上添加如下js代码:
<script type="text/javascript">
myFocus.set({
    id:'picbox',//焦点图盒子ID
});
</script>
这里的id就是上一步里div的id号,现在也就能理解为什么在上一步的时候,div上有个class了,为什么我还加了一个id。
html代码是都OK了,放上去之后,你还是会发现,跟效果图是不一样的,这是因为你没做css代码,图片会一个一个的显示出来。
.content_right { width:500px; height:363px; overflow:hidden; padding-top:5px;}
放上这段css代码后,那就OK了,效果还杠杠的,具体效果图可以看看我网站首页右侧的焦点图。

本文出自 福州seo|福建seo,转载时请注明出处及相应链接。

分享本文至:

俗话说:SEO大神都喜欢发表自己的观点!那么你呢?

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部