由于工作要将图片做成幻灯片样式,于是想到了JQuery插件slick,上网查了一下,一些效果用法实例特意在此记录下:
一.单个显示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery幻灯片插件slick演示</title>
<link rel="stylesheet" href="style/slick.css">
<style>
* { margin: 0; padding: 0;}
.slick { width: 600px; margin: 0 auto;}
.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
.slick-prev { left: -35px;}
.slick-next { right: -35px;}
.slick-dots { bottom: -35px;}
</style>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-单个显示</h1>
<div class="slick">
<div><img src="images/1.jpg" alt=""></a></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
<div><img src="images/4.jpg" alt=""></div>
<div><img src="images/5.jpg" alt=""></div>
<div><img src="images/6.jpg" alt=""></div>
<div><img src="images/7.jpg" alt=""></div>
<div><img src="images/8.jpg" alt=""></div>
<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
$(function(){
$('.slick').slick({
dots: true
});
});
</script>
</html>
运行效果:
二.多个显示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery幻灯片插件slick演示</title>
<link rel="stylesheet" href="style/slick.css">
<style>
* { margin: 0; padding: 0;}
.slick { width: 900px; margin: 0 auto;}
.slick img { width: 280px; border: 10px solid #fff;}
.slick-prev:before, .slick-next:before { position: absolute; left: 0; top: 1px; color: #ccc;}
.slick-prev { left: -35px;}
.slick-next { right: -35px;}
.slick-dots { bottom: -35px;}
</style>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-多个显示</h1>
<div class="slick">
<div><img src="images/1.jpg" alt=""></a></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
<div><img src="images/4.jpg" alt=""></div>
<div><img src="images/5.jpg" alt=""></div>
<div><img src="images/6.jpg" alt=""></div>
<div><img src="images/7.jpg" alt=""></div>
<div><img src="images/8.jpg" alt=""></div>
<div><img src="images/9.jpg" alt=""></div>
</div>
</body>
<script src="script/jquery-1.8.3.js"></script>
<script src="script/slick.js"></script>
<script>
$(function(){
$('.slick').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 3
});