plusview幻灯片小图切换大图三种演示效果

plusview幻灯片小图切换大图三种演示效果

plusview 是一个可以制作类似 Google Play 商店截图列表项的幻灯片效果。

淘建站为您提供更多_图片代码_图片轮播_轮播_焦点图,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 412 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

HTML

首先我们在.plusview放置多个图片

<div class="plusview">
    <ul>
        <li>
            <a href="images/17b.jpg" data-type="image">
                <img src="images/17s.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="images/18b.jpg" data-type="image">
                <img src="images/18s.jpg" alt="">
            </a>
        </li>
......
    </ul>
</div>

引入jQuery库和plusview.js

<script src="jquery.js"></script>
<script src="js/plusview.js"></script>

演示一:plusview默认调用效果

$(function() {
    $('.plusview').plusview();
});

演示二:plusview无动画效果

$('.plusview').plusview({
    height: 400,
    hide: "hide",
    show: "show"
});

演示三:自动播放

$(function() {
    $('.plusview').plusview({
        height: 160,
        showItem: 3,
        duration: 5000,
        wrap: true
    });
});
参数 描述 默认值
height 幻灯片的高度 300
show 幻灯片显示的动画方式,可使用 jQuery 的动画方式 slideDown
hide 幻灯片隐藏的动画方式,可使用 jQuery 的动画方式 slideUp
showItem 开始时显示第几张幻灯片,从 0 开始计算 无
duration 幻灯片持续的时间 无
wrap 是否循环播放幻灯片 false
scrollIntoView 幻灯片展开时是否滚动到幻灯片顶部 true
buttonHeight 按钮的高度 50

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/241.html
plusview幻灯片小图切换大图三种演示效果 希望对你有帮助,感谢您的支持!
  • jQuery css3仿Prezi幻灯片文字3D旋转切换特效代码

    jQuery css3仿Prezi幻灯片文字3D旋转切换特效代码

  • 原生JS制作Google首页logo标志太极动画效果

    原生JS制作Google首页logo标志太极动画效果

  • jquery camera全屏相册幻灯片插件带马赛克网格子图片切...

    jquery camera全屏相册幻灯片插件带马赛克网格子图片切...

  • 原生js制作Google粘土logo动画涂鸦代码

    原生js制作Google粘土logo动画涂鸦代码

  • jquery带时间轴的图片轮播

    jquery带时间轴的图片轮播

  • OwlCarousel足球世界杯轮播效果

    OwlCarousel足球世界杯轮播效果

  • jQuery+multiscroll鼠标滚动全屏图

    jQuery+multiscroll鼠标滚动全屏图

  • ck-slide淡入淡出效果的图片轮播插件

    ck-slide淡入淡出效果的图片轮播插件

  • jQuery广告banner轮播效果

    jQuery广告banner轮播效果

  • jQuery宽屏大图片轮播插件

    jQuery宽屏大图片轮播插件

  • jquery实现透明度轮播图特效

    jquery实现透明度轮播图特效

  • Js实现幻灯片图片切换效果源码下载

    Js实现幻灯片图片切换效果源码下载

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2