<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>默认</title>
<link href="css/flickerplate.css" rel="stylesheet">
<style>
.flicker-example { width: 900px; height: 300px; margin-left: auto; margin-right: auto;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/modernizr-custom-v2.7.1.min.js"></script>
<script src="js/jquery-finger-v0.1.0.min.js"></script>
<script src="js/flickerplate.min.js"></script>
<script>
$(function(){
$('.flicker-example').flicker();
});
</script>
</head>
<body>
<div class="flicker-example">
<ul>
<li data-background="img/field.jpg">
<div class="flick-title">Flickerplate</div>
<div class="flick-sub-text">——小巧的jQuery幻灯片插件</div>
</li>
<li data-background="img/forest.jpg">
<div class="flick-title">可修改 Javascript 或 CSS</div>
<div class="flick-sub-text">查看参数，看看如何修改成你需要的效果</div>
</li>
<li data-background="img/frozen-water.jpg">
<div class="flick-title">触摸事件</div>
<div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div>
</li>
</ul>
</div>
</body>
</html>
效果图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>圆点导航位置</title>
<link href="css/flickerplate.css" rel="stylesheet">
<style>
.flicker-example { width: 900px; height: 300px; margin-left: auto; margin-right: auto;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/modernizr-custom-v2.7.1.min.js"></script>
<script src="js/jquery-finger-v0.1.0.min.js"></script>
<script src="js/flickerplate.min.js"></script>
<script>
$(function(){
$('.flicker-example').flicker({
dot_alignment: 'right',
block_text: false
});
});
</script>
</head>
<body>
<div class="flicker-example">
<ul>
<li data-background="img/field.jpg">
<div class="flick-title">Flickerplate</div>
<div class="flick-sub-text">——小巧的jQuery幻灯片插件</div>
</li>
<li data-background="img/forest.jpg">
<div class="flick-title">可修改 Javascript 或 CSS</div>
<div class="flick-sub-text">查看参数，看看如何修改成你需要的效果</div>
</li>
<li data-background="img/frozen-water.jpg">
<div class="flick-title">触摸事件</div>
<div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div>
</li>
</ul>
</div>
</body>
</html>
效果图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>动画方式</title>
<link href="css/flickerplate.css" rel="stylesheet">
<style>
.flicker-example { width: 900px; height: 300px; margin-left: auto; margin-right: auto;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/modernizr-custom-v2.7.1.min.js"></script>
<script src="js/jquery-finger-v0.1.0.min.js"></script>
<script src="js/flickerplate.min.js"></script>
<script>
$(function(){
$('.flicker-example').flicker({
flick_animation: 'jquery-slide',
block_text: false
});
});
</script>
</head>
<body>
<div class="flicker-example">
<ul>
<li data-background="img/field.jpg">
<div class="flick-title">Flickerplate</div>
<div class="flick-sub-text">——小巧的jQuery幻灯片插件</div>
</li>
<li data-background="img/forest.jpg">
<div class="flick-title">可修改 Javascript 或 CSS</div>
<div class="flick-sub-text">查看参数，看看如何修改成你需要的效果</div>
</li>
<li data-background="img/frozen-water.jpg">
<div class="flick-title">触摸事件</div>
<div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div>
</li>
</ul>
</div>
</body>
</html>
效果图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>深色主题</title>
<link href="css/flickerplate.css" rel="stylesheet">
<style>
.flicker-example { width: 900px; height: 300px; margin-left: auto; margin-right: auto;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/modernizr-custom-v2.7.1.min.js"></script>
<script src="js/jquery-finger-v0.1.0.min.js"></script>
<script src="js/flickerplate.min.js"></script>
<script>
$(function(){
$('.flicker-example').flicker({
theme : 'dark'
});
});
</script>
</head>
<body>
<div class="flicker-example">
<ul>
<li data-background="img/field.jpg">
<div class="flick-title">Flickerplate</div>
<div class="flick-sub-text">——小巧的jQuery幻灯片插件</div>
</li>
<li data-background="img/forest.jpg">
<div class="flick-title">可修改 Javascript 或 CSS</div>
<div class="flick-sub-text">查看参数，看看如何修改成你需要的效果</div>
</li>
<li data-background="img/frozen-water.jpg">
<div class="flick-title">触摸事件</div>
<div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div>
</li>
</ul>
</div>
</body>
</html>
效果图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>HTML data属性</title>
<link href="css/flickerplate.css" rel="stylesheet">
<style>
.flicker-example { width: 900px; height: 300px; margin-left: auto; margin-right: auto;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/modernizr-custom-v2.7.1.min.js"></script>
<script src="js/jquery-finger-v0.1.0.min.js"></script>
<script src="js/flickerplate.min.js"></script>
<script>
$(function(){
$('.flicker-example').flicker();
});
</script>
</head>
<body>
<div class="flicker-example" data-block-text="false" data-auto-flick-delay="6" data-dot-alignment="left" data-theme="light">
<ul>
<li data-background="img/field.jpg">
<div class="flick-title">Flickerplate</div>
<div class="flick-sub-text">——小巧的jQuery幻灯片插件</div>
</li>
<li data-background="img/forest.jpg">
<div class="flick-title">可修改 Javascript 或 CSS</div>
<div class="flick-sub-text">查看参数，看看如何修改成你需要的效果</div>
</li>
<li data-background="img/frozen-water.jpg">
<div class="flick-title">触摸事件</div>
<div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div>
</li>
</ul>
</div>
</body>
</html>
效果图：
参考网站：http://www.dowebok.com/demo/2014/101/index4.html 打开链接
相关推荐
原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带缩略图文字简介幻灯轮播图js插件.rar 原生js实现带...
本资源包含纯JavaScript实现的三种不同类型的轮播图，这对于熟悉JavaScript和想要提升前端技能的开发者来说，是一份非常有价值的参考资料。 1. **基本轮播图实现**： - 基本的轮播图通常包括自动播放、手动切换和...
响应式圆形js轮播图插件，如"jcircle.js"，是网页设计中一个创新且引人注目的元素。这种插件的核心在于它能够将传统矩形的轮播图转变为独特的圆形展示形式，增加了视觉吸引力，使得内容的呈现更加生动和有趣。尤其在...
轮播图，作为一种常见的网页元素，...通过理解和应用以上知识点，你可以轻松地将这个轮播图插件应用到实际项目中，同时也为自己的JavaScript和前端技能积累宝贵经验。无论是学习还是实践，这个插件都是一个很好的起点。
javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图...
【JavaScript堆叠卡片轮播图插件stackedCards详解】 在网页设计中，为了吸引用户的注意力和提升用户体验，轮播图已经成为一种常见的展示方式。stackedCards是一款基于JavaScript的插件，专门用于创建富有创意的堆叠...
**JavaScript 实现无缝轮播图插件** 在前端开发中，轮播图是一种常见的交互元素，用于展示多张图片或内容。本教程将探讨如何使用原生JavaScript来实现一个无缝轮播图插件，实现方式模块化，方便维护和扩展。 ### 1...
"实现时尚简洁的js轮播图特效插件.zip" 提供了一个JavaScript实现的轮播图插件，它可以帮助开发者快速地在网站上添加具有动态效果的轮播组件。本文将详细讲解轮播图的实现原理、关键代码解析以及如何使用这个插件。 ...
代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行轮播，并且可自定义轮播间隔时间等一...
**jQuery轮播图插件mySystem.js详解** 在网页设计中，轮播图是一种常见的元素，用于展示多张图片或内容，节省空间的同时增加页面的动态效果。jQuery库以其丰富的功能和易用性，成为了创建轮播图插件的首选工具之一...
SuperSlide是一款强大的JavaScript轮播图插件，专为网页设计者和开发者提供方便、灵活的上下滚动轮播效果。这款插件不仅支持传统的左右滑动，还特别支持了垂直方向的上下滚动，为网页的动态展示增添了更多的可能性。...
本项目针对特定需求，开发了一款“左右倾斜轮播图”插件，旨在解决网络上现有插件功能复杂、不贴合实际需求的问题。这款插件的设计理念是简洁高效，提供更灵活的定制化服务。 首先，我们来理解“倾斜”的概念。在...
"手机轮播图3D插件"就是专为移动端设计的一种增强型的轮播图组件，它利用JavaScript技术实现了3D视觉效果，使得用户在浏览时能体验到更立体、动态的切换效果。本插件主要关注于提升用户体验，通过3D转换和动画效果，...
总的来说，全屏响应式背景大图淡入淡出轮播特效js插件是现代网页设计中一种常用且实用的技术，它结合了JavaScript和CSS的优点，为用户提供了一种视觉上引人入胜的交互体验。开发者应当熟悉这些技术，以便在实际工作...
响应式Carousel轮播图插件是网页设计中常用的一种组件，尤其在现代Web开发中，随着移动设备的普及，响应式设计变得至关重要。Bootstrap Carousel作为一款流行的基础轮播组件，为开发者提供了简单易用的解决方案。...
【标题】"带预览效果的炫酷js轮播图插件"介绍了一款名为`previewSlider`的JavaScript插件，这款插件专为创建视觉吸引力强、具有预览功能的轮播图而设计。在网页设计中，轮播图是一种常见的元素，用于展示多张图片或...
【标题】"js轮播图代码"涉及到的核心技术是JavaScript（简称js）和网页动态效果的实现，特别是图像展示的动态交互。轮播图是一种常见的网页设计元素，用于在有限的空间内展示多张图片或内容，通过自动切换或用户交互...
【移动端的纯js轮播图插件】是一种广泛应用于网页设计中的组件，特别是在移动设备上。随着智能手机和平板电脑的普及，对响应式和交互性强的网页内容需求日益增加，轮播图作为展示多张图片或信息的有效方式，自然成为...
手机端轮播图插件是移动应用开发中常见的组件，用于在有限的屏幕空间内展示多张图片或内容，常用于产品推广、广告展示等场景。这类插件的设计目标是提供流畅、美观且易于交互的用户体验。在本文中，我们将探讨手机端...