`

JS 轮播图的Flickerplate插件

阅读更多
<!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 打开链接

 

 

 

 

 

  • 大小: 780.9 KB
  • 大小: 615.5 KB
  • 大小: 606.5 KB
  • 大小: 611.1 KB
  • 大小: 615.3 KB
0
1
分享到:
评论

相关推荐

    jQuery轮播图插件,背景图实现轮播图,轮播图可增加文字

    代码简介:兼容IE8的jQuery轮播图插件是一款兼容性很好的,使用非常简单的网站焦点图代码,依赖jquery和pageSwitch.js来实现轮播效果,轮播图以背景图的方式插入到当前页面进行轮播,并且可自定义轮播间隔时间等一...

    实现时尚简洁的js轮播图特效插件.zip

    "实现时尚简洁的js轮播图特效插件.zip" 提供了一个JavaScript实现的轮播图插件,它可以帮助开发者快速地在网站上添加具有动态效果的轮播组件。本文将详细讲解轮播图的实现原理、关键代码解析以及如何使用这个插件。 ...

    jQuery轮播图插件mySystem.js

    **jQuery轮播图插件mySystem.js详解** 在网页设计中,轮播图是一种常见的元素,用于展示多张图片或内容,节省空间的同时增加页面的动态效果。jQuery库以其丰富的功能和易用性,成为了创建轮播图插件的首选工具之一...

    vue.js轮播图.rar

    在“vue.js轮播图.rar”这个压缩包中,包含的是使用Vue.js实现的一个轮播图组件,非常适合初学者进行学习和实践。 首先,让我们了解轮播图的基本概念。轮播图,也称为滑动图片展示或旋转木马,是一种常见的网页元素...

    全屏响应式背景大图淡入淡出轮播特效js插件.zip

    总的来说,全屏响应式背景大图淡入淡出轮播特效js插件是现代网页设计中一种常用且实用的技术,它结合了JavaScript和CSS的优点,为用户提供了一种视觉上引人入胜的交互体验。开发者应当熟悉这些技术,以便在实际工作...

    旋转插件,可以制作轮播图

    4. 插件使用:如Bootstrap的carousel组件或Slick等第三方轮播图插件,它们提供了丰富的选项和API接口,简化了开发过程。 5. 指示点和箭头:用于显示当前选中的图片和提供手动切换功能,通常通过事件监听和DOM操作...

    移动端的纯js轮播图插件

    【移动端的纯js轮播图插件】是一种广泛应用于网页设计中的组件,特别是在移动设备上。随着智能手机和平板电脑的普及,对响应式和交互性强的网页内容需求日益增加,轮播图作为展示多张图片或信息的有效方式,自然成为...

    完整JavaScript轮播图代码

    一般用来设置网站图片自动轮播一般用来设置网站图片自动轮播

    js 层叠轮播图

    3. JavaScript 基础:JS负责处理轮播图的动态效果。这包括切换图片、计算动画时间、响应用户交互等。可以使用事件监听(如`click`事件)来捕捉用户的操作,然后执行相应的函数。 4. 变量与数据结构:在JS中,我们...

    js轮播图框架(sugar)

    JavaScript轮播图框架,如“Sugar”,是一种用于创建动态、交互式图像滑动效果的工具。这类框架在网页设计中非常常见,用于展示产品图片、幻灯片或任何需要顺序展示的内容。Sugars的核心特性在于其兼容性,能够适应...

    带视觉差效果的超酷js轮播图插件

    这款“带视觉差效果的超酷js轮播图插件”利用JavaScript技术,为用户带来独特的视觉体验。它通过将多张图片合成为Canvas元素,并在图片切换时产生强烈的视觉差效果,从而提升网页的动态感和吸引力。 **1. 视觉差...

    javaScript轮播图实现代码

    JavaScript轮播图是一种常见的网页动态效果,用于展示一组图片或内容,通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中,我们有`index.html`作为主页面,`images`目录则包含轮播图所需的图片。以下是...

    jQuery轮播图插件.zip

    jQuery是一款轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果等,因此常被用于实现轮播图插件。本篇文章将深入探讨基于jQuery的轮播图插件的实现原理和关键知识点。 首先,我们需要了解轮播图的基本...

    jquery堆叠图片左右切换轮播图插件

    在实际使用中,开发者需要将图片和相应的HTML结构与CSS样式结合,然后引入jQuery库和这款轮播图插件的JS文件。通过设置插件的参数,如切换速度、自动播放间隔、导航按钮样式等,可以自定义轮播图的行为和外观。此外...

    jQuery多屏简单实用带数字按钮轮播图插件.zip

    1. **引入资源**:在HTML文件中引入jQuery库和轮播图插件的JS和CSS文件。 2. **HTML结构**:设置轮播图容器,以及每个屏幕的标记,通常使用`&lt;div&gt;`元素。 3. **初始化插件**:在页面加载完成后,使用jQuery选择器...

    原生JS撸的轮播图插件

    总的来说,原生JS编写的轮播图插件是一个很好的学习实践项目,它可以帮助你提升JavaScript编程技巧,特别是DOM操作、事件处理和动画创建等方面的能力。通过阅读和理解`JS-roomSlider-master`的代码,你可以进一步...

    html+js+css图片轮播图下方配文字可变图片可点击.rar

    "html+js+css图片轮播图下方配文字可变图片可点击"是一个完整的网页项目,利用HTML、JavaScript和CSS三种核心技术实现了这一功能。下面将详细解释这个项目中的关键知识点。 首先,HTML(HyperText Markup Language...

    带预览效果的炫酷js轮播图插件.zip

    previewSlider是一款带预览效果的炫酷js轮播图插件。该轮播图在鼠标悬停到前后导航按钮上时,会出现展示缩略图按钮,点击后可以展示所有图片。点击任意缩略图则可以将其放大到全屏进行展示。

    原生js轮播图.zip

    4. **lb.js**:这是未压缩的JavaScript源码,实现了轮播图的核心功能,如切换图片、自动播放、响应式设计等。开发者可以通过阅读这个文件来学习原生JS轮播图的实现细节。 5. **lb.min.js**:这是经过压缩的...

    jQuery轮播图插件使用简单大小修改方便.zip

    这个压缩包“jQuery轮播图插件使用简单大小修改方便.zip”包含了实现这一功能所需的基本组件,包括JavaScript(js)文件、样式表(css)、HTML(index.html)以及可能的图像资源(img)。 首先,jQuery库是这个轮播...

Global site tag (gtag.js) - Google Analytics