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