怎么制作上下翻动的网站轮播图
说起网站轮播图，大多是左右切换翻动的。少数也有上下翻动效果的。如果想制作上下翻动的网站轮播图需要使用一些JS插件来实现。
方法/步骤
第一步：下载网站特效功能万能JS插件包；
第二步：将下载的压缩包解压出来，将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的images文件夹里；
第三步：在头部模板header.php里找到</head> 标签，将下的代码放到</head> 标签上面；（注意文件路径）
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery1.42.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery.SuperSlide.2.1.3.js"></script>
第四步：在需要显示网站轮播图的位置，放上以下的代码来显示轮播图。
<div id="slideBox" class="slideBox">
<div class="hd">
<ul><li>1</li><li>2</li><li>3</li></ul>
</div>
<div class="bd">
<ul>
<li><a rel="nofollow" href="#" target="_blank"><img src="images/pic1.jpg" /></a></li>
<li><a rel="nofollow" href="#" target="_blank"><img src="images/pic2.jpg" /></a></li>
<li><a rel="nofollow" href="#" target="_blank"><img src="images/pic3.jpg" /></a></li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<script type="text/javascript">
jQuery(".slideBox").slide({mainCell:".bd ul",effect:"topLoop",autoPlay:true});
</script>
这样，上下翻动的网站轮播图就制作好了。
