jQuery百叶窗轮播插件Shutter

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

 41811  407  查看评论 (54)
分享到微信朋友圈
X
jQuery百叶窗轮播插件Shutter ie兼容8

jQuery-Shutter 百叶窗轮播

1. 使用方法:将相应的HTML代码写入你的页面,把CSS/JS文件引入,即可使用2. 参数说明:

$('.shutter').shutter({
        shutterW: 1000, // 容器宽度
        shutterH: 358, // 容器高度
        isAutoPlay: true, // 是否自动播放
        playInterval: 3000, // 自动播放时间
        curDisplay: 3, // 当前显示页
        fullPage: false // 是否全屏展示
      });

3. 如果需要自适应,需要把全屏展示打开

4. 有问题可以留言或mail我

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

js 3D立体相册

这是一个照片墙,通过鼠标点击来实现照片的播放,具有3D立体效果,代码简单有详细的注释。
  幻灯片和轮播图
 46478  394

3D图片轮播

带倒影效果的3D轮播图效果插件
  幻灯片和轮播图
 44691  458

基于swiper的两边叠加轮播图

基于swiper的两边叠加,渐渐缩小的轮播图,支持移动端
  幻灯片和轮播图
 41851  316

基于swiper实现的画廊展示

基于swiper实现的响应式全屏画廊展示
  幻灯片和轮播图
 32219  371

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

    青青子衿 0
    2023/7/4 10:02:47
    初始化状态总是显示最后一张图片,等到页面渲染完毕之后才第一张图片 怎么解决 求解 回复
    用户6345265652 0
    2022/11/9 16:27:56
    请问一下,轮播图加载时如果设置第一张图为背景图,而不是最后一张呢? 回复
    初衷 0
    2022/2/18 15:58:44
    褪了色的记忆 ?刺痛心扉 0
    2020/9/17 8:57:25
    下面怎么加控制切换的小圆点 回复
    qzuser 0
    2019/12/6 17:02:54
    切换效果如何修改啊 改源文件吗 回复
    久念成瘾 0
    2019/7/10 17:39:19
    轮播图片是透明的咋办
    回复
    小肥侠 0
    2019/6/30 16:03:49

    请问 我用siteserver CMS建站  
    前台图片已能正常轮播,但标题不能随图片切换,请问该怎么修改前台代码?我是小白 请大佬指导下

    <div class="shutter">
        <div class="shutter-img">
            <stl:contents channelIndex="图片新闻" channelName="图片新闻" totalNum="6" order="AddDate">
                <stl:a target="_blank" data-shutter-title="" }>
                    <stl:image></stl:image>
                </stl:a>
                <ul class="shutter-btn">
                    <li class="prev"></li>
                    <li class="next"></li>
                </ul>
            </stl:contents>
            <div class="shutter-desc">
    
            </div>
        </div>
    </div>
    
    <script>
        $(function() {
            $('.shutter').shutter({
                shutterW: 440, // 容器宽度
                shutterH: 330, // 容器高度
                isAutoPlay: true, // 是否自动播放
                playInterval: 3000, // 自动播放时间
                curDisplay: 6, // 当前显示页
                fullPage: false // 是否全屏展示
            });
        });
    </script>
        小肥侠0
        2019/7/1 7:57:42
        我已经搞定了
    回复
    疑人 0
    2019/6/3 12:43:09
    我的后台数据遍历上去后 无法轮播 回复
    阿燕 0
    2019/5/13 14:11:14
    怎么样能自适应宽高
        ―+、柬。劫〈?0
        2019/5/16 18:39:38
        楼下有
    回复
    Smile 0
    2019/5/5 15:21:53
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复