首先看效果图：

如上图所示，点击右上角的箭头，可以滚动下面的图片，吸引人的是，中间的小点点也会变。

昨天看到一个家伙的效果图是这个，但是找了半天也没找到。今天发现是腾讯上面的，不把他扣下来实在是难以满足我的欲望。因此，扣下来了，当然要与大家分享。

我在这里建议，大家做了某些效果，可以放到网上给大家一起使用。这样会让大家的网站变得越来越好。

JS\CSS\图片，均打包在这里，大家先下载一下。

以下内容只有回复后才可以浏览,请先登录！

将下载下来的压缩包，放到网站的images目录或者你自己放置图片的目录，我一般用image文件夹。这个根据自己的需要。

实例中假设放在“image”文件夹中。

放置好这些文件之后，在你需要的模板中写下如下代码：

==================

<div class="mod-left bottom-Article-QQ sildPic-Article-QQ">

<div class="hd">

  <h2><a href="链接地址" target="_blank" >栏目名称</a></h2>

  <div class="sildPicBar" id="sildPicBar">

  <span class="pre"></span>

  <ul id="dot">

  </ul>

  <span class="next"></span>

  </div>

</div>

<div class="bd">

<div class="cnt-wrap" id="cnt-wrap">

<div class="cnt" id="cnt">

  <ul>{LB_腾讯循环图文标签}</ul>

</div>

</div>

</div>

</div>

<script type="text/javascript" src="/image/gun_pic/11.js"></script>

==================

如上代码说明：

代码没有标注的代码你直接复制即可，懂div+css的很容易看懂的。加了红色和蓝色的说明如下：

链接地址：如上图所示“图说天下”这几个字是带链接的。在你的网站上，你想链接到哪里，把地址写在这里即可。如果不需要，可不加链接。

栏目名称：如上图所示，就是“图说天下”几个字，根据你自己的需要随便放置。

{LB_腾讯循环图文标签}：这个是你新建的标签的名字。我们使用科讯自带的万能标签即可做出来了。

image：这是你讲我上面的压缩包放在哪个文件夹下面，这个文件夹叫什么，这里就写什么。

=======华丽的分割线=======

模板中加好了代码，但是我们还要写上CSS才可以。CSS文件我已经放在了压缩包内。

调用方式如下两种，你可以任意选择一种。

1、在模板head区域加上如下代码：

--------复制下面的代码---------

<link href="/image/gun_pic/11.css" rel="stylesheet" type="text/css"/>

---------复制上面的代码--------

这是常见的加入css的方法。

2、在原先调用的css中加上如下代码：

---------复制下面的代码--------

@import url("/image/gun_pic/11.css");

---------复制上面的代码--------

这是在原来的CSS中再嵌入一个CSS文件，加在第一行即可。科讯默认的CSS文件是 /images/index.css

image：这是你讲我上面的压缩包放在哪个文件夹下面，这个文件夹叫什么，这里就写什么。

=======华丽的分割线=======

OK，做好了上面的两步后，就必须去做万能标签了。

万能标签怎么做，我这里只给出循环代码，其他的设置条件你自己去想喽，根据你自己的需要设置即可。

---------复制下面的代码--------

[loop={@num}]<li>

<span><a href="{@classurl}" target="_blank">{@classname}</a></span>

<a href="{@linkurl}" target="_blank"><img src="{@photourl}" alt="{@fulltitle}" /></a>

<a href="{@linkurl}" target="_blank" class="link">{@title}</a>

</li>[/loop]

---------复制上面的代码--------

条数设置为12条即可。

=====写在最后======

在本教程里面，没有写如何调整JS和CSS以达到更加灵活的效果，但是如果你稍微懂点JS，和DIV+CSS的话，应该是不难调整的。如果你看不懂JS或者CSS也没关系，直接拿过去就能做出和腾讯一样的效果。

本教程出自“菏泽网站建设”。大家看了教程觉得好的话，顶一个哈！