<!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 打开链接