由于工作要将图片做成幻灯片样式，于是想到了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
});
});
</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; padding: 10px;}
.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: 1
});
});
</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 { max-width: 1024px; margin: 0 auto;}
.slick img { width: 100%;}
.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>
<p style="margin-bottom: 20px; text-align: center; color: #f50;">试试改变浏览器窗口大小</p>
<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: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</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: 600px; margin: 0 auto;}
.slick img { width: 100%;}
.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,
fade: 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 { box-sizing: border-box; width: 260px; height: 170px;}
.slick-slide img { padding: 20px;}
.slick-center img { padding: 10px;}
.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({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
})
</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; padding: 10px;}
.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,
lazyLoad: 'ondemand',
slidesToShow: 3,
slidesToScroll: 1
});
})
</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; padding: 10px;}
.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: 1,
autoplay: true,
autoplaySpeed: 2000
});
})
</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: 600px; margin: 0 auto;}
.slick img { width: 100%;}
.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;}
.unslick { margin-bottom: 20px; text-align: center; font-size: 14px; color: #f50; overflow: hidden; zoom: 1;}
.unslick a { display: inline-block; padding: 5px 8px; background-color: #f50; color: #fff; text-decoration: none;}
</style>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery幻灯片插件slick演示-解绑/销毁</h1>
<p class="unslick"><a href="javascript:">解绑/销毁</a> 点击后将为元素移除 slick() 方法，幻灯片将失效。</p>
<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.min.js"></script>
<script>
$(function(){
$('.slick').slick({
dots: true
});
$('.unslick a').click(function(){
$('.slick').unslick();
});
})
</script>
</html>
运行效果：
相关推荐
在本篇中，我们将深入探讨jQuery幻灯片的原理、常见插件以及如何利用它们来增强网站的用户体验。 一、jQuery 幻灯片基础 jQuery 是一个轻量级的JavaScript库，它简化了DOM操作、事件处理和动画制作。幻灯片效果...
三、jQuery幻灯片插件 1. Slick：一款功能强大且高度自定义的幻灯片插件，支持触摸滑动、分页指示器、多列布局等功能。 2. Carousel：Bootstrap框架自带的轮播组件，易于使用，兼容性良好。 3. FlexSlider：轻量...
为了提高兼容性和性能，可以考虑使用现代前端框架，如Bootstrap的Carousel组件，或者专门的幻灯片插件，如Slick或Swiper。但既然这个项目提供了源代码，意味着你可以根据需求自定义功能，以满足特定的设计或交互要求...
《jQuery实现Flash风格图片幻灯片播放特效详解》 在Web开发中，为了吸引用户的注意力并展示...在实际开发中，还可以结合现有的jQuery幻灯片插件，如Slick、FlexSlider等，快速构建更复杂、功能更丰富的幻灯片组件。
对于进阶开发者，可以研究现有的开源幻灯片插件，如 Slick、Swiper 等，了解其内部机制并进行定制化开发。 总的来说，JavaScript 和 jQuery 幻灯片效果的实现涉及前端开发的多个方面，包括 DOM 操作、事件监听、...
该压缩包文件“仿迅雷影音官网的全屏大图jQuery幻灯片代码.zip”包含了一个用于实现全屏大图展示的jQuery幻灯片代码，其设计灵感来源于迅雷影音官方网站。这种幻灯片效果在网页设计中常用于突出显示重要的图片或内容...
现在我们将详细探讨一些最佳的jQuery幻灯插件和相关教程，帮助大家轻松实现这种效果。 1. **jFlow幻灯插件** jFlow是一个功能强大且界面简洁的图片幻灯展示插件，常被推荐用于创建图片幻灯效果。它能够自动播放图片...
在本文中，我们将深入探讨如何在ASP.NET环境中利用jQuery Upload结合幻灯片功能来创建一个简单但实用的实例。jQuery Upload是一款强大的文件上传插件，它提供了丰富的自定义选项和多文件上传的能力，而幻灯片则常...
4. Swiper：不仅支持图片轮播，还可以实现幻灯片、滑块等多种效果，性能优秀，广泛应用于移动设备。 5. Nivo Slider：提供多种过渡效果和自定义主题，适合那些希望快速创建美观轮播的开发者。 四、应用实践 在实际...
9. **插件化**：jQuery有许多开源的幻灯片插件，如Bootstrap的carousel或Slick Slider，它们提供了丰富的选项和自定义能力。这些插件可能已经被预封装在这个压缩包中，用于快速实现幻灯片功能。 总的来说，"jQuery...
总的来说，这个压缩包提供了一个实现PC和手机端通用的响应式jQuery幻灯片轮播的完整实例。开发者可以通过研究和修改这些文件来学习如何创建自己的轮播组件，或者直接在自己的项目中应用这个轮播特效。这涉及到的知识...
4. **可能的插件**：有时候，开发者可能会使用现成的jQuery幻灯片插件，如`slick.js`或`swiper.js`，这些插件提供了预设的选项和方法，简化了开发过程。 在实际项目中，开发者需要根据网站的需求对源码进行适当的...
实现jQuery幻灯片主要包括以下几个步骤： - **选择器**：使用jQuery选择器获取到幻灯片容器和内容元素。 - **CSS样式**：设置初始样式，比如隐藏除第一个幻灯片外的所有内容。 - **事件绑定**：为导航控制按钮绑定...
在实际应用中，幻灯片效果还可以结合现代前端框架，如Bootstrap的carousel组件，或者使用专门的幻灯片插件，如Slick、Swiper等，这些工具提供了更多预设的动画效果和自定义选项。 总之，实现一个网页幻灯片效果涉及...
2. **自动滚动**：该插件允许设置自动滚动，比如用于创建幻灯片效果，增强用户体验。 3. **导航控制**：fullPage.js提供了内置的导航条和指示器，用户可以轻松地在各个页面之间切换。 4. **响应式设计**：fullPage....
3. 滑块插件：对于不熟悉前端开发的设计师，可以使用现有的开源幻灯片插件，如Slick、Swiper等。这些插件预设了许多样式和功能，只需简单配置即可使用。 三、应用实例 1. 自动轮播：设定一个定时器，定期更换幻灯...
总的来说，"jq全屏背景幻灯片"项目是一个综合运用前端技术的实例，通过HTML5、CSS和jQuery实现了一个动态且吸引人的全屏背景轮播效果。在实际开发过程中，开发者需要注意性能优化，确保在不同浏览器和设备上的兼容性...
比如，可以使用`<figure>`和`<figcaption>`元素来组织和标记图片及描述，再配合JavaScript或者jQuery插件（如Slick或Swiper）来实现滑动效果。这些插件可以处理动画、触控事件和自动播放等特性，使得幻灯片展示更加...
比如，如果"jQuery超炫页面"中包含幻灯片展示或轮播图，那很可能就是借助了jQuery的轮播插件，如Slick或Bootstrap Carousel。 总结来说，"jQuery超炫页面MelissaHie"实例展示了如何利用jQuery进行高效的DOM操作、...