jQuery图片百叶窗插件shutter轮播切换代码

来源:https://www.sucaihuo.com/js/2691.html 2017-08-10 23:24浏览(2499) 收藏

一款jQuery图片百叶窗插件shutter轮播切换代码,图片按照一定的时间间隔自动百叶窗效果切换,有可以点击左右的箭头切换图片,图片的文字内容可以自由定义,整体样式效果还是比较大气的,喜欢的童鞋请收下吧。
jQuery图片百叶窗插件shutter轮播切换代码
分类:图片代码 > 图片轮播 难易:
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入一个必要的CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/shutter.css">

页面的body部分,用了指定样式的div作为容器放入多个a标签的图片链接,下面接着用一个ul无序列表放切换按钮,代码如下:

<div class="shutter">
  <div class="shutter-img">
    <a href="#" data-shutter-title="超人"><img src="images/shutter_2.jpg" alt="#"></a>
    <a href="#" data-shutter-title="浩克"><img src="images/shutter_3.jpg" alt="#"></a>
    <a href="#" data-shutter-title="钢铁侠"><img src="images/shutter_1.jpg" alt="#"></a>
  </div>
  <ul class="shutter-btn">
    <li class="prev"></li>
    <li class="next"></li>
  </ul>
  <div class="shutter-desc">
    <p>钢铁侠</p>
  </div>
</div>

页面的底部,去引入jQuery库和两个必要的JS文件,并启用插件设置好相应参数,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/velocity.js"></script>
<script type="text/javascript" src="js/shutter.js"></script>
<script type="text/javascript">
$(function () {
  $('.shutter').shutter({
    shutterW: 1000, // 容器宽度
    shutterH: 358, // 容器高度
    isAutoPlay: true, // 是否自动播放
    playInterval: 3000, // 自动播放时间
    curDisplay: 3, // 当前显示页
    fullPage: false // 是否全屏展示
  });
});
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2