如何制作网站图片轮播特效（JQuery banner 轮播）
图片轮播特效在网站制作过程中经常会用到，它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中，也讲过如何制作网站幻灯片，我们在学习做网站时，也可以在自己的网站上制作网站图片轮播特效。
我们今天介绍的这种网站图片轮播特效，包括自动轮播与手动轮播二种共同体，是使用HTML+CSS+JQuery代码制作而成。适用于企业网站建设和门户网站建设等所有类型网站制作使用。并且兼容PC网站与手机网站制作。效果图如下：
下面讲一下自己建网站时，如何制作这样的网站图片JQuery banner 轮播特效的步骤。
- 下载网站图片轮播特效所需的JS代码。下载地址：https://pan.baidu.com/s/1gftfdGf；
- 下载好之后，将其解压，将里面的js和images文件夹上传到自己网站空间的根目录下；
- 将以下的CSS样式复制放到自己网站原有的CSS文件的特别底部；
/*-----------------学做网站论坛代码：自定义按钮样式，移动端不需要，PC端根据实际情况选择----------------*/
.demo {width: 800px;height: 450px;font-size: 14px;position:relative;}
.demo a.control {position:absolute;display: block;top: 50%;margin-top: -78px;width: 76px;height: 112px;cursor: pointer;z-index: 2;background: url(/images/buttons.png) no-repeat}
.demo a.prev {left: 0;background-position: 0 0}
.demo a.next {right: 0;background-position: -76px 0}
.demo a.prev:hover {background-position: 0 -112px}
.demo a.next:hover {background-position: -76px -112px}
.slider {display: none} - 在网站中需要显示网站图片轮播特效的位置放上以下的HTML代码。（如果你对HTML不了解，可先学习一下html5入门教程）
<center>
<div class="demo">
<a class="control prev"></a><a class="control next abs"></a><!--自定义按钮，移动端可不写-->
<div class="slider"><!--主体结构，请用此类名调用插件，此类名可自定义-->
<ul>
<li><a href=""><img src="/images/1.jpg" alt="图片描述1" /></a></li>
<li><a href=""><img src="/images/2.jpg" alt="图片描述2" /></a></li>
<li><a href=""><img src="/images/3.jpg" alt="图片描述3" /></a></li>
<li><a href=""><img src="/images/4.jpg" alt="图片描述4" /></a></li>
<li><a href=""><img src="/images/5.jpg" alt="图片描述5" /></a></li>
</ul>
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/YuxiSlider.jQuery.min.js"></script>
<script>
$(".slider").YuxiSlider({
width:800, //容器宽度
height:450, //容器高度
control:$('.control'), //绑定控制按钮
during:4000, //间隔4秒自动滑动
speed:800, //移动速度0.8秒
mousewheel:true, //是否开启鼠标滚轮控制
direkey:true //是否开启左右箭头方向控制
});
</script>
</center> - 如需更换图片，只需要替换根目录下的images文件夹下的图片为自己的图片即可，图片尺寸为800px*450px。
通过以上的步骤，我们就可以在自己建网站时，在自己的网站上制作出一个漂亮的网站图片轮播特效（JQuery banner 轮播）。
