一起来看看效果吧：

图片数字索引切换实例

下面首先来讲讲我是怎么做到的。

一、下载下面这个js文章传到你的网站里面，比如我的路径是/根目录/show/js/yao.js

下载 js.rar

二、打开你说使用的主题的CSS文件，一般路径是：/根目录/wp-content/themes/主题名称/style.css

将下面的代码加到style.css文件的最下面：


#YSlide{position:relative;z-index:1;margin:70px auto;width:550px;height:370px;padding:4px;border:3px solid #B0BEC7;overflow:hidden;}
.YSample{margin:0 auto;overflow:hidden;}
.YSample,.YSample img{width:550px;height:370px;}
.YSample strong{position:absolute;z-index:5;bottom:4px;left:28px;font-weight:normal;width:526px;height:40px;line-height:40px;text-indent:10px;font-size:14px;color:#FFF;background-color:#000;opacity:.7;-moz-opacity:.7;filter:alpha(opacity=70);}
#YSIndex{position:absolute;z-index:6;top:325px;right:4px;width:500px;text-align:right;height:40px;line-height:40px;overflow:hidden;}
#YSIndex a:link,#YSIndex a:visited,#YSIndex a:hover{position:relative;z-index:6;padding:4px 8px;border:1px solid #FFF;color:#FFF;margin-right:5px;font-weight:bold;text-decoration:none;font-size:14px;}
#YSIndex a:hover,#YSIndex a.current:link,#YSIndex a.current:visited,#YSIndex a.current:hover{background-color:#35AADF;}

.even{background-color:#F8F8F8;}
.odd{background-color:#EAEFF5;}
.hover{background-color:#B0BEC7;color:#FFF;cursor:pointer;}
.hidden{display:none;clear:both;}

说明：

1、width:550px;height:370px这个是整个框框的大小，你可以自己随便修改，看你需要多大就改多大；

2、.YSample strong这一行是控制下面半透明的那个标题一栏的位置的，如果你改动了上面的值，这个也是做相应的更改的；

3、#YSIndex{position:absolute;z-index:6;这一行是控制切换标签的位置的，也就是那个数据序号的位置，如果你改动了第一条中的位置，那么这个也是需要做相应的更改的。

4、为什么我的滑动门左边有一小点宽呢，是因为我在主题css代码中加入了首行缩进代码，如果你的主题文件没有加这个代码的话，是不会存在那个小缝隙的；

5、以上就是第一次必须修改的，以后都不用变动了。

三、将滑动门特效插入到文章中

新建一篇文章，复制以下代码到HTML编辑器中，做相应的更改：

<div id=”YSlide”>

<p class=”YSample”><a href=”http://www.chinazhw.com” title=”林嘉欣”><img src=”http://www.chinazhw.com/show/img/1.jpg” alt=”林嘉欣” /></a><strong>林嘉欣</strong></p>

<p class=”YSample”><a href=”#1″ title=”思考”><img src=”http://www.chinazhw.com/show/img/2.jpg” alt=”思考<” /></a><strong>思考</strong></p>

<p class=”YSample”><a href=”#1″ title=”一个美女”><img src=”http://www.chinazhw.com/show/img/3.jpg” alt=”一个美女” /></a><strong>一个美女</strong></p>

<p class=”YSample”><a href=”#1″ title=”飞天战机”><img src=”http://www.chinazhw.com/show/img/4.jpg” alt=”飞天战机” /></a><strong>飞天战机</strong></p>

<p class=”YSample”><a href=”#1″ title=”超级女声张珊珊”><img src=”http://www.chinazhw.com/show/img/5.jpg” alt=”超级女声张珊珊” /></a><strong>超级女声张珊珊</strong></p>

<p class=”YSample”><a href=”#1″ title=”超级女声张珊珊”><img src=”http://www.chinazhw.com/show/img/6.jpg” alt=”超级女声张珊珊” /></a><strong>超级女声张珊珊</strong></p>

<p id=”YSIndex”><a href=”#1″ class=”current”>1</a><a href=”#1″>2</a><a href=”#1″>3</a><a href=”#1″>4</a><a href=”#1″>5</a><a href=”#1″>6</a></p>

</div>

<script language=”javascript” type=”text/javascript” src=”http://www.chinazhw.com/show/js/yao.js”></script>

<script language=”javascript” type=”text/javascript”>

<!–

YAO.YTabs({

tabs: YAO.getEl(‘YSIndex’).getElementsByTagName(‘a’),

contents: YAO.getElByClassName(‘YSample’, ‘p’, ‘YSlide’),

defaultIndex: 1,

auto: true,

fadeUp: true

});

//–>

</script>

说明：

1、<p class=”YSample”><a href=”http://www.chinazhw.com” title=”林嘉欣”><img src=”http://www.chinazhw.com/show/img/1.jpg” alt=”林嘉欣” /></a><strong>林嘉欣</strong></p>，这个大家应该一看就知道的，红色的代表超链接地址，蓝色代表图片的存放地址，别的就是要显示的标题了；

2、 <p id=”YSIndex”><a href=”#1″ class=”current”>1</a><a href=”#1″>2</a><a href=”#1″>3</a><a href=”#1″>4</a><a href=”#1″>5</a><a href=”#1″>6</a></p>这个是和上面的代码一一对应的，上面是几段，这里就要有几个，比如我的是6个，那么这里就要写到6；

3、<script language=”javascript” type=”text/javascript” src=”http://www.chinazhw.com/show/js/yao.js“></script>紫色的就代表你最开始的存放的js文件的路径。

OK，这样就好了，还可以再文章中加入一些其它的说明，就可以发表出去了。如果图片比较多的话，你还可以放置多个滑动门，这样就很方便的观看了。

原创文章，转载请注明出处。

欢迎加入独立博客交流群：21372183