马超超网

    (图多流量党慎入！)网站捣鼓JS焦点图特效有一阵子了，也整理了不少有用的代码。不少网站都常常套用了模板之后就保持原样开始更新内容，在我看来完全无法体现出每个网站不同的地方。而且同样的界面看得多了，难免产生审美疲劳，不论对于用户还是搜索引擎都没有太大的好处。这次就先整理了几个JS焦点图特效代码，就是网站首页那几个大图。虽然在我的网站那几个图片貌似没有用上，不过似的网页本身看起来图文结合更强了一些。如果网站自带的缩略图显示不了估计是图片服务器悲催了，直接下载代码在自己电脑上测试就行。

代码下载地址：点我下载

1、5屏上下滚动焦点图

    这种一般可用于网站侧栏等等小位置的JS焦点图特效，对于个人网站来说节省了空间和位置，也可以更有效的体现网站的内容。

2、带缩略图的焦点图

    这种和上面的类似，不过从宽度上来说比上面的长了很多，实际截图的时候没有截图完全。可以作为网站导航栏下面JS焦点图特效使用，比如某些新闻类大型网站。

3、6屏左右循环滚动图片

    这个就很简单了，看起来也相对的整洁。对于一些小说网站以及文章页底部推荐阅读可以使用的JS焦点图特效，写一部分随机文章随机图片代码就可以很方便的使用了。

4、图片翻动展示效果

    这个特效在IE9+以及其他的chrome核心浏览器特效相当赞，而且内容占用相当少。这个作为目录页面或者分类页相当好用，甚至有时候超过了导航条。

5、10屏带缩略图焦点图

    图片可以自定义描述信息，更便于让人们了解到图片想表达的内容。作为视频网站或者其他图片网站的JS焦点图特效相当赞，娱乐类网站用10屏图片也方便展示自己很多的内容。

6、循环滚动图片

    这个是从房地产网站上发现的，图片会随着移动等比例放下或者缩小。用在类似房地产网站以及金融类网站的介绍相对便捷，或者说可以提供一个展示的机会？

7、CSS3动态缩放焦点图

    这个已经融入了很多特效了，虽然是用的最新的CSS3编写的，但是仍旧兼容IE8等老式浏览器。作为首页版头特辑或者小说类的封面介绍相当好用，推荐媒体类网站！

    以上这7种JS焦点图特效基本可以覆盖了所有的网站了，需要的只是把自己网站的代码和焦点图的代码适当的整合一下，让JS焦点图特效在自己的网站和其他的内容部分不冲突就可以了。灵活运用好焦点图可以让自己的网站用户粘滞度提高很多，推荐站长们不要总套用了模板就不管了，代码其实挺好玩的，不是学代码的也能研究明白。