plusview 是一个可以制作类似 Google Play 商店截图列表项的幻灯片效果。
淘建站为您提供更多_图片代码_图片轮播_轮播_焦点图,在此特别感谢您对我们的支持与厚爱!
演示不了,点击反馈
下载 412 次
觉得不错,可打赏下作者
免费共享
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 |

