如何制作网站图片轮播特效（JQuery banner 轮播）

图片轮播特效在网站制作过程中经常会用到，它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中，也讲过如何制作网站幻灯片，我们在学习做网站时，也可以在自己的网站上制作网站图片轮播特效。

我们今天介绍的这种网站图片轮播特效，包括自动轮播与手动轮播二种共同体，是使用HTML+CSS+JQuery代码制作而成。适用于企业网站建设和门户网站建设等所有类型网站制作使用。并且兼容PC网站与手机网站制作。效果图如下：

下面讲一下自己建网站时，如何制作这样的网站图片JQuery banner 轮播特效的步骤。

1. 下载网站图片轮播特效所需的JS代码。下载地址：https://pan.baidu.com/s/1gftfdGf；
2. 下载好之后，将其解压，将里面的js和images文件夹上传到自己网站空间的根目录下；
3. 将以下的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}
4. 在网站中需要显示网站图片轮播特效的位置放上以下的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>
5. 如需更换图片，只需要替换根目录下的images文件夹下的图片为自己的图片即可，图片尺寸为800px*450px。

通过以上的步骤，我们就可以在自己建网站时，在自己的网站上制作出一个漂亮的网站图片轮播特效（JQuery banner 轮播）。

标签： isp 代码 建网站 建站 建站教程 企业网站 网站建设 网站制作 制作网站

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。