零基础建站培训介绍

当前位置:

jquery图片自动切换轮播图

这是一款jquery图片轮播图,适合新手学做网站学员使用,只要按照以下的方法操作,就可以将一款好看的jquery图片轮播图放到自己做的网站上了。

先看下这款jquery图片轮播图的效果图:jquery-img

下面介绍一下这款jquery图片自动切换轮播图的制作方法。

  1. 下载jquery图片自动切换轮播图文件压缩包。下载地址: https://pan.baidu.com/s/1boAFv0V 密码: bgpc
  2. 将下载下来的文件压缩包解压,并将里面的CSS、JS、images三个文件夹全部上传到网站空间里;1
  3. 将以下的JS代码放到自己网页的</body>标签上面;
    <script src="js/jquery.min.js"></script>
    <script src="js/velocity.js"></script>
    <script src="js/shutter.js"></script>
    <script>
    $(function () {
    $('.shutter').shutter({
    shutterW: 1000, // 容器宽度
    shutterH: 358, // 容器高度
    isAutoPlay: true, // 是否自动播放
    playInterval: 3000, // 自动播放时间
    curDisplay: 3, // 当前显示页
    fullPage: false // 是否全屏展示
    });
    });
    </script>
  4. 在自己网站上需要显示轮播图的位置,放上下面的HTML代码,用于显示轮播图。
    <div class="shutter">
    <div class="shutter-img">
    <a href="#" data-shutter-title="Iron Man"><img src="images/shutter_1.jpg" alt="#"></a>
    <a href="#" data-shutter-title="Super Man"><img src="images/shutter_2.jpg" alt="#"></a>
    <a href="#" data-shutter-title="The Hulk"><img src="images/shutter_3.jpg" alt="#"></a>
    <a href="#" data-shutter-title="The your"><img src="images/shutter_4.jpg" alt="#"></a>
    </div>
    <ul class="shutter-btn">
    <li class="prev"></li>
    <li class="next"></li>
    </ul>
    <div class="shutter-desc">
    <p>Iron Man</p>
    </div>
    </div>
  5. 再将下面的CSS代码放在</head>标签上面,用于引入css文件。
    <link rel="stylesheet" href="css/shutter.css">
  6. 这样就可以在自己网站上制作jquery图片轮播图。

以上这个jquery图片自动切换轮播图的尺寸,可以通过修改CSS来达到自己网站的需求。

上一课: 下一课:

发表评论