零基础建站培训介绍

当前位置:

如何制作网站图片轮播特效(JQuery banner 轮播)

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

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

网站图片轮播特效(JQuery banner 轮播)

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

  1. 下载网站图片轮播特效所需的JS代码。下载地址:https://pan.baidu.com/s/1gftfdGf;
  2. 下载好之后,将其解压,将里面的js和images文件夹上传到自己网站空间的根目录下;如何制作网站图片轮播特效(JQuery banner 轮播)2
  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 轮播)。

上一课: 下一课:

发表评论

零基础学建站就到学做网站论坛