投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 幻灯片轮番图 / 完美滑动jQuery轮播图插件特效
完美滑动jQuery轮播图插件特效
标签:

插件介绍

    这是一款jQuery滑动无缝轮播图插件,只用一个程序,所有同类型轮播图都可以调用,可以控制播放速度。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-02
    阅读:

完美滑动jQuery轮播图插件特效

简要教程

这是一款jQuery滑动无缝轮播图插件,只用一个程序,所有同类型轮播图都可以调用,可以控制播放速度。

使用方法

在页面引入以下Myapi.js文件

<script src="js/Myapi.js"></script>

Html结构

html结构按以下格式写入页面的相应位置(css样式自己参考修改即可)。

<div >
       <ul >
           <li><img src=""></li>
           <li><img src=""></li>
       </ul>
    <ul ></ul><!-- 点 -->
   <a ><</a><!-- 上一张 -->
   <a >></a><!-- 下一张 -->
</div>

插件调用

以下代码复制到页面底部

$(function(){
    //new一个新对象,变量名myApi1可以自行定义
    var myApi1 = new Myapi();
     
    //myApi1.JSON.lagout(v1,v2,v3),
    //v1,v2,v3是三个参数,其中
    //v1是最外层的div
    //v2是轮播图的播放速度,以毫秒为单位
    //v3轮播图的最外层高与图片的高度差(控制点在图片外时,与图片的距离)
    myApi1.JSON.lagout($('.J_banner1'),2000,0);
})

①由于用到了一些新的封装方法,所以JQ库用2.1以上的版本。

②因为容器的宽高等都是根据图片自适应的,所以一定要保持图片的大小相同、准确。

③图中的点,和左右翻页,如果不需要,在HTML中去掉即可。

④JS引入时,一定要先引入JQ库文件,再引入插件文件,最后写调用代码。