jquery图片自动切换轮播图
这是一款jquery图片轮播图,适合新手学做网站学员使用,只要按照以下的方法操作,就可以将一款好看的jquery图片轮播图放到自己做的网站上了。
下面介绍一下这款jquery图片自动切换轮播图的制作方法。
方法/步骤
- 下载jquery图片自动切换轮播图文件压缩包。下载地址: https://pan.baidu.com/s/1boAFv0V 密码: bgpc
- 将下载下来的文件压缩包解压,并将里面的CSS、JS、images三个文件夹全部上传到网站空间里;
- 将以下的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> - 在自己网站上需要显示轮播图的位置,放上下面的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> - 再将下面的CSS代码放在</head>标签上面,用于引入css文件。
<link rel="stylesheet" href="css/shutter.css">
- 这样就可以在自己网站上制作jquery图片轮播图。
以上这个jquery图片自动切换轮播图的尺寸,可以通过修改CSS来达到自己网站的需求。
想请教一下我想获取网站首页各栏目下所有链接内容里的图片,将它们显示在首页并轮播,然后点击图片时又进入相应的网页。应该怎么做?思路也可以
可以,只需将上面幻灯片的代码里调用图片的固定代码替换成动态调用代码即可。相关方法见:wordpress网站轮播切换图幻灯片【后台控制】制作
最多支持多少张图片轮播,示例10张就不能播放了