jquery插件讲解：轮播（SlidesJs）+验证（Validation）

最新推荐文章于 2024-07-10 21:05:14 发布

最骚的就是你

最新推荐文章于 2024-07-10 21:05:14 发布

阅读量4k

点赞数 1

分类专栏： web前端学习

本文链接：https://blog.csdn.net/libin_1/article/details/51888098

版权

本文介绍了SlidesJs轮播插件的使用，包括键盘、触摸和CSS3转换支持，并概述了其API。同时，文章详细讲解了jQuery Validation Plugin的表单验证功能，包括各种验证规则和方法，帮助实现有效的表单验证。

摘要由CSDN通过智能技术生成

转自：http://www.cnblogs.com/chenrf/p/5654093.html#undefined

SlidesJs（轮播支持触屏）——官网（http://slidesjs.com）

1.简介

SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件。支持键盘，触摸，css3转换。

2.代码

<!doctype html>
<head>
  <style>
    /* Prevents slides from flashing */
    #slides {
   
      display:none;
    }
  </style>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="jquery.slides.min.js"></script>

  <script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 528
      });
    });
  </script>
</head>
<body>
  <div id="slides">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
  </div>
</body>

API简介

1.设置轮播的宽高（默认值都为 auto）

$("#slides").slidesjs({
    width: 700,
    height: 393
  });

2.设置从那张开始（默认值为 1）

$("#slides").slidesjs({
    start: 3  //这里注意数值从1开始，不是0；默认值0
  });

3.设置上下切换按钮

可以自定样式：

<a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a>
<a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a>

$("#slides").slidesjs({
    navigation: {
      active: true,　　//显示或隐藏前一张后一张切换按钮；默认值为true,
      effect: "slide"　　//设置切换的方式，slide:平滑，fade:渐显；默认值slide
    }
});

4.设置分页切换

可以自定样式：

<ul class="slidesjs-pagination">
　　<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="active">1</a></

最低0.47元/天解锁文章

最骚的就是你

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录