怎么制作上下翻动的网站轮播图

说起网站轮播图，大多是左右切换翻动的。少数也有上下翻动效果的。如果想制作上下翻动的网站轮播图需要使用一些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>

这样，上下翻动的网站轮播图就制作好了。