带各种百叶窗过渡效果的jQuery幻灯片插件

所属分类:媒体-幻灯片和轮播图

 34455  398  查看评论 (23)
分享到微信朋友圈
X
带各种百叶窗过渡效果的jQuery幻灯片插件 ie兼容10

简要教程

osSlider是一款简单实用的带各种百叶窗过渡效果的jQuery幻灯片插件。该幻灯片插件在slide过渡时随机生成各种百叶窗效果,它使用简单,通过简单的设置即可正常工作。


使用方法

使用该幻灯片插件需要在页面中引入jQuery(1.8+)和osSlider.css以及osSlider.js文件。

<link rel="stylesheet" href="css/osSlider.css" />
<script src="js/jquery.min.js"></script>
<script src="js/osSlider.js"></script>

           

HTML结构

该幻灯片的基本HTML结构是使用一个<div>容器来包裹一个无序列表。无序列表中每一项是一个幻灯片slide。

<div class="slider">
  <ul class="slider-main">
    <li>
      <img src="1.jpg" alt="">
    </li>
    <li>
      <img src="2.jpg" alt="">
    </li>
    <li<code class="html plain" style="box-sizing: content-box; font-size: 12.3165px; padding: 0px; font-family: 'Source Code Pro', 'Courier New', Courier, monospace; color: rgb(52, 73, 94); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-


相关插件-幻灯片和轮播图

仿今日头条滚动轮播banner图(原创)

今日头条PC端首页滚动轮播图效果
  幻灯片和轮播图
 29002  324

jQuery轮播图带浮动焦点详细

jQuery轮播图带浮动焦点详细,可用于产品展示某个点的详细。
  幻灯片和轮播图
 32686  388

非全屏轮播banner图

非全屏轮播banner
  幻灯片和轮播图
 34195  360

jQuery带有导航效果的图片轮播

代码简单易懂,易修改的图片轮播效果底部附带导航效果
  幻灯片和轮播图
 34990  330

讨论这个项目(23)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    , 0
    2020/11/12 17:18:07
    为作者点赞 改了那么多的动态轮播图自适应都会有大有小的bug 就作者这个很棒 点赞! 回复
    json_zeng 0
    2019/11/25 15:53:42
    这个版本有没有响应式
        ,0
        2020/11/12 17:16:12
        有的 这个轮播图跟其它比起来做的还是非常棒的
        Hey, Ben0
        2021/1/20 11:07:52
        这个响应式怎么弄
    回复
    一只猿 0
    2018/5/17 10:41:36
    请问可以把img换成div么 回复
    为梦执着 0
    2017/9/20 10:48:50
    淡水 0
    2017/9/20 6:13:02

    太好了,正需要啊!

    回复
    戈比老王 0
    2017/7/25 16:58:32

    想问可以设置高宽吗?假如我设置100%宽860px高,还能使用吗?

        Woow0
        2019/3/20 14:57:01
        肯定是可以的呀,每个图片的宽高就是每个li的宽高呀
        磐石0
        2019/9/12 16:47:11
        可以的
    回复
    橙色阳光 0
    2016/8/16 13:08:33
    呵呵,还好度娘给我的权重够,搜js的名字第一个还是本宝宝自己的博客。这不过是去年的娱乐作品而已。 回复
    李飞 0
    2016/7/14 10:07:45
    想下载,但是不想花钱的说,只能有资源来分享再下载了 回复
    坤宇天下 0
    2016/3/21 11:03:39
    余额不足,下载不了,挺喜欢的 回复
    0
    2016/1/8 16:01:46
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复