学做网站培训课程介绍

当前位置:

jquery图片自动切换轮播图

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

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

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

方法/步骤

  1. 下载jquery图片自动切换轮播图文件压缩包。下载地址: https://pan.baidu.com/s/1boAFv0V 密码: bgpc
  2. 将下载下来的文件压缩包解压,并将里面的CSS、JS、images三个文件夹全部上传到网站空间里;1
  3. 将以下的JS代码放到自己网页的</body>标签上面;(如果不懂HTML,可以先学习一下html入门教程
    <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来达到自己网站的需求。

《“jquery图片自动切换轮播图”》 有 3 条评论

  1. 学习建网站学员 JongSUK说道:

    想请教一下我想获取网站首页各栏目下所有链接内容里的图片,将它们显示在首页并轮播,然后点击图片时又进入相应的网页。应该怎么做?思路也可以

  2. 学习建网站学员 code说道:

    最多支持多少张图片轮播,示例10张就不能播放了

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在自己建网站过程中,由于版面限制,很多内容需要制作成一TAB选项卡,这样在同样一个尺寸的版块,可以显示成倍的内容。TAB选项卡在很多在的大量网站中
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 经常更换wordpress主题,会有一个困扰,就是之前主题的内容区域宽度比较大,很多正文图片的尺寸可能是500px,而换了一个主题,内容区域的宽度比较小,
  • 在日常上网过程中,复制,粘贴是特别寻常不过的了,有时我们在某一网站复制后,粘贴到别的地方时,它会自己加上它网站的一个版权信息链接。比如:此文章转
  • 可以说任意一个网站都少不了换灯片,在之前的课程里学做网站论坛也列举了很多网站幻灯片代码,通过这些方法,我们可以制作作某一个规定尺寸的换灯片,
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 在我们仿站过程中,有点网站上带有轮播图,大多都是通过JS+FLASH的方式。这会给网站带来大量的冗余代码。如果你不喜欢,可以用一张图片来替换