前端JS特效第48集:terseBanner焦点图轮播插件

news2024/11/13 15:01:38

terseBanner焦点图轮播插件,先来看看效果:

部分核心的代码如下(全部代码在文章末尾):

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>terseBanner-简洁优雅的jquery轮播图插件</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="side">
        <h1>简洁优雅的轮播插件</h1>
        <div class="anchor">
            <a href="#anchor-2">自定义样式</a>
            <a href="#anchor-3">动画</a>
            <a href="#anchor-4">缩略图</a>
            <a href="#anchor-5">自适应</a>
            <a href="#anchor-6">延迟加载</a>
            <a href="#anchor-7">切换</a>
            <a href="#anchor-8">回调函数</a>
            <a href="#anchor-9">参数列表</a>
        </div>
    </div>
    <div class="main">
        <div class="container top">
            <p>
                相对于大部分轮播插件来说,terseBanner删除了很多不实用或很少用的功能,只保留了最常用的,使用方便,功能完善,可以满足绝大多数网站的需求<br>
                支持 ie8 浏览器,支持触屏事件
            </p>
            <div class="banner" id="top">
                <ul>
                    <li><img src="img/banner-1.jpg"></li>
                    <li><img src="img/banner-2.jpg"></li>
                    <li><img src="img/banner-3.jpg"></li>
                    <li><img src="img/banner-4.jpg"></li>
                    <li><img src="img/banner-5.jpg"></li>
                    <li><img src="img/banner-6.jpg"></li>
                </ul>
            </div>
            <div class="code">
<pre><code>
&lt;style&gt;
    .banner{width: 960px;height: 540px;}
&lt;/style&gt;
&lt;div class=&quot;banner&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;img src=&quot;img/banner-1.jpg&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img/banner-2.jpg&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img/banner-3.jpg&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img/banner-4.jpg&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img/banner-5.jpg&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img/banner-6.jpg&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.terseBanner.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
    $(&#x27;.banner&#x27;).terseBanner();
&lt;/script&gt;
</code></pre>
            </div>
        </div>

        

        <div class="container custom" id="anchor-2">
            <h2>自定义样式</h2>
            <p>也可以使用自定义的样式来覆盖默认的样式(在默认样式的选择器前面再加一级)</p>
            <div class="banner" id="custom">
                <ul>
                    <li><img src="img/banner-1.jpg"></li>
                    <li><img src="img/banner-2.jpg"></li>
                    <li><img src="img/banner-3.jpg"></li>
                    <li><img src="img/banner-4.jpg"></li>
                    <li><img src="img/banner-5.jpg"></li>
                    <li><img src="img/banner-6.jpg"></li>
                </ul>
            </div>
            <div class="code">
<pre><code>
.custom .tb-arrow a{
    width: 64px;
    height: 64px;
    margin: 0 20px;
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
}
/* ... */

.custom .tb-btn{
    bottom: 0;
    height: 10px;
}
.custom .tb-btn a{
    width: 160px;
    margin: 0;
    box-sizing: border-box;
    background: #666;
    border-right: 1px solid #fff;
    border-radius: 0;
}
/* ... */
</code></pre>
            </div>
        </div>

        <div class="container animation" id="anchor-3">
            <h2>动画</h2>
            <p>4种动画方式:<b>slide, fade, flash, none</b>(flash模式是fade模式的简化,图片切换时可以出现闪烁的白色背景)
            <br>PS:slide模式不支持垂直方向的滑动</p>
            <div class="select">
                <span>fade</span>
                <ul>
                    <li>slide</li>
                    <li>fade</li>
                    <li>flash</li>
                    <li>none</li>
                </ul>
            </div>
            <div class="banner" id="animation">
                <ul>
                    <li><img src="img/banner-1.jpg"></li>
                    <li><img src="img/banner-2.jpg"></li>
                    <li><img src="img/banner-3.jpg"></li>
                    <li><img src="img/banner-4.jpg"></li>
                    <li><img src="img/banner-5.jpg"></li>
                    <li><img src="img/banner-6.jpg"></li>
                </ul>
            </div>
        </div>

        <div class="container thumbnail" id="anchor-4">
            <h2>缩略图</h2>
            <p>自动截取原始图片的一部分作为缩略图,缩略图列表超出容器时自动添加列表滑动按钮</p>
            <div class="clearfix">
                <div class="banner" id="thumbnail">
                    <ul>
                        <li><img src="img/banner-1.jpg"></li>
                        <li><img src="img/banner-2.jpg"></li>
                        <li><img src="img/banner-3.jpg"></li>
                        <li><img src="img/banner-4.jpg"></li>
                        <li><img src="img/banner-5.jpg"></li>
                        <li><img src="img/banner-6.jpg"></li>
                    </ul>
                </div>
                <div class="code">
<pre><code>
$('#thumbnail').terseBanner({
    btn: false,
    thumb: {
        width: 150,
        height: 84,
        gap: 4,
        visible: 3
    }
});
</code></pre>
                </div>
            </div>
            <div class="clearfix">
                <p><br>也可以手动设置每一张缩略图,在原始图片的地址后面加上 <b>?thumb=...</b></p>
                <div class="code">
<pre><code>
&lt;div class=&quot;banner&quot; id=&quot;thumbnail&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;img src=&quot;img/banner-1.jpg?thumb=img/thumb-1.jpg&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img/banner-2.jpg?thumb=img/thumb-2.jpg&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src=&quot;img/banner-3.jpg?thumb=img/thumb-3.jpg&quot;&gt;&lt;/li&gt;
        &lt;!-- ... --&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
                </div>
            </div>
        </div>

        <div class="container adaptive" id="anchor-5">
            <h2>自适应</h2>
            <p>让图片自适应轮播的宽度,可以用来满屏显示图片(使用此功能时,缩略图功能将会被禁用)</p>
            <div class="scale">
                <span>改变轮播的宽度:</span>
                <a>→ ←</a>
                <a class="larger">← →</a>
            </div>
            <a class="widescreen">宽屏演示</a>
            <div class="banner" id="adaptive">
                <ul>
                    <li><img src="img/banner-1.jpg"></li>
                    <li><img src="img/banner-2.jpg"></li>
                    <li><img src="img/banner-3.jpg"></li>
                    <li><img src="img/banner-4.jpg"></li>
                    <li><img src="img/banner-5.jpg"></li>
                    <li><img src="img/banner-6.jpg"></li>
                </ul>
            </div>
        </div>

        <div class="container lazyload" id="anchor-6">
            <h2>延迟加载</h2>
            <p>减少大图片的单张加载时间(有默认的loading动画)<br>
            把图片的 <b>src</b> 属性换成 <b>data-src</b> 即可</p>
            <a class="reload">重新加载大图</a>
            <div class="banner" id="lazyload">
                <ul>
                    <li><img data-src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/02/ChMkJ1bxATiIVlzmAAlJIHaXmLkAAOTUgN32YEACUk4716.jpg"></li>
                    <li><img data-src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/02/ChMkJ1bxATaIevuuABYRrSzYfikAAOTUgI7dk0AFhHF290.jpg"></li>
                    <li><img data-src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/02/ChMkJ1bxATyIHmOaAA427DMtOHcAAOTUwGiFqgADjcE489.jpg"></li>
                    <li><img data-src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/02/ChMkJlbxAUCIMqKdAAMVx51HXogAAOTUwP6tOQAAxXf894.jpg"></li>
                    <li><img data-src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/02/ChMkJlbxATqIBOwbAAt1D9lCvKkAAOTUwB9S5IAC3Un823.jpg"></li>
                </ul>
            </div>
            <div class="code">
<pre><code>
&lt;div class=&quot;banner&quot; id=&quot;lazyload&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;img data-src=&quot;img/banner-1.jpg&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img data-src=&quot;img/banner-2.jpg&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img data-src=&quot;img/banner-3.jpg&quot;&gt;&lt;/li&gt;
        &lt;!-- ... --&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
            </div>
        </div>

        <div class="container switch" id="anchor-7">
            <h2>切换</h2>
            <p>可以在自定义的事件中切换轮播图片,给方法 terseBanner() 传递一个参数:<b>'prev' | 'next' | [Number]</b></p>
            <div class="btn">
                <a class="prev">prev</a>
                <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
                <a class="next">next</a>
            </div>
            <div class="banner" id="switch">
                <ul>
                    <li><img src="img/banner-1.jpg"></li>
                    <li><img src="img/banner-2.jpg"></li>
                    <li><img src="img/banner-3.jpg"></li>
                    <li><img src="img/banner-4.jpg"></li>
                    <li><img src="img/banner-5.jpg"></li>
                    <li><img src="img/banner-6.jpg"></li>
                </ul>
            </div>
            <div class="code">
<pre><code>
$('.switch .btn .prev').click(function() {
    $('#switch').terseBanner('prev');
});

$('.switch .btn .next').click(function() {
    $('#switch').terseBanner('next');
});

$('.switch .btn ul li').click(function() {
    $('#switch').terseBanner(parseInt($(this).text()));
});
</code></pre>
            </div>
        </div>

        <div class="container callback" id="anchor-8">
            <h2>回调函数</h2>
            <p><b>init</b>, <b>before</b>, <b>after</b><br>
            可以传入的参数为 <b>$banner, $item, currentIndex</b>(参数说明在参数列表中)</p>
            <div class="banner" id="callback">
                <ul>
                    <li><img src="img/banner-1.jpg"></li>
                    <li><img src="img/banner-2.jpg"></li>
                    <li><img src="img/banner-3.jpg"></li>
                    <li><img src="img/banner-4.jpg"></li>
                    <li><img src="img/banner-5.jpg"></li>
                    <li><img src="img/banner-6.jpg"></li>
                </ul>
            </div>
            <div class="code">
<pre><code>
$('#callback').terseBanner({
    arrow: true,
    init: function ($banner, $item) {
        $item.each(function(i) {
            $(this).append('&lt;em&gt;' + (i + 1) +'&lt;/e&gt;>');
        });
    },
    before: function ($banner, $item, currentIndex) {
        $item.eq(currentIndex).find('em').css({
            top: -120,
            opacity: 0
        });
    },
    after: function ($banner, $item, currentIndex) {
        $item.eq(currentIndex).find('em').css({
            top: 210,
            opacity: 1
        });
    }
});
</code></pre>
            </div>
        </div>

        

    </div>
	
	<script type="text/javascript" src="lib/highlight.pack.js"></script>
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="lib/jquery-1.11.0.min.js"><\/script>')</script>
	<script type="text/javascript" src="dist/jquery.terseBanner.min.js"></script>
	<script type="text/javascript" src="lib/script.js"></script>
</body>
</html>

全部代码:terseBanner焦点图轮播插件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1941130.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python每日学习:异常处理

python每日学习8&#xff1a;异常处理 Python中的错误可以分为两种&#xff1a;语法错误和异常 语法错误(Syntax errors) &#xff1a;代码编译时的错误&#xff0c;不符合Python语言规则的代码会停止编译并返回 错误信息。 缺少起始符号或结尾符号(括号、引号等)。 缩进错误…

算法篇 滑动窗口 leetCode 30 串联所有单词的子串

串联所有单词的子串 1.题目描述2.题目解释2.1 原理解释2.2 文字分析 3.代码演示 1.题目描述 2.题目解释 2.1 原理解释 2.2 文字分析 3.代码演示

移动硬盘在苹果电脑上使用后在windows中无法读取 Win和Mac的硬盘怎么通用

在日益普及的跨平台工作环境中&#xff0c;苹果电脑与Windows PC之间的数据交换成为日常需求。然而&#xff0c;用户常面临一个困扰&#xff1a;为何苹果电脑的硬盘能在macOS下流畅运行&#xff0c;却在Windows系统中变得“水土不服”&#xff1f;这一问题核心在于硬盘格式的不…

mac docker no space left on device

mac 上 docker 拉取镜像报错 Error response from daemon: write /var/lib/docker/tmp/docker-export-3995807640/b8464f52498789c4ebbc063d508f04e8d2586567fbffa475e3cd9afd3c5a7cf2/layer.tar: no space left on device解决&#xff1a; 增加 docker 虚拟磁盘大小。如下图

Echarts + 低代码 :可视化如何赋能企业的创新之路?

Echarts最新技术资源&#xff08;建议收藏&#xff09; https://gcdn.grapecity.com.cn/forum.php?modviewthread&tid149493&highlightecharts 前言 数据驱动已经成为企业决策和业务优化的关键所在&#xff0c;在数字化时代&#xff0c;高效的数据分析与可视化呈现是…

多类支持向量机损失(SVM损失)

(SVM) 损失。SVM 损失的设置是&#xff0c;SVM“希望”每个图像的正确类别的得分比错误类别高出一定幅度Δ。 即假设有一个分数集合s[13,−7,11] 如果y0为真实值&#xff0c;超参数为10&#xff0c;则该损失值为 超参数是指在机器学习算法的训练过程中需要设置的参数&#xf…

大数据之写入Doris数据问题

1. 解决Key columns should be a ordered prefix of the schema. KeyColumns[1] (starts from zero) is xxx, but 背景 create table if not exists XXX ( fathercorp varchar(50), id decimalv3(38,0) ) ENGINEOLAP UNIQUE KEY(id) COMMENT xxxx DISTRIBUTED BY HASH(id) BUC…

深入理解Linux网络(一):内核如何接收网络包

深入理解Linux网络&#xff08;一&#xff09;&#xff1a;内核如何接收网络包 一、网络收包总览二、Linux启动1、创建 ksoftirqd 内核进程2、网络子系统初始化3、协议栈注册4、网卡初始化NAPI 5、启动网卡 三、接收数据1、硬中断处理2、ksoftirqd 内核线程处理软中断3、网络协…

数据库基础与安装MYSQL数据库

一、数据库管理系统DBMS 数据库技术是计算机科学的核心技术之一&#xff0c;具有完备的理论基础。使用数据库可以高效且条理分明地存储数据&#xff0c;使人们能够更加迅速、方便地管理数据 1.可以结构化存储大量的数据信息&#xff0c;方便用户进行有效的检索和访问 2.可以…

24届电子信息应届硕士生秋招+春招心得与感悟

背景&#xff1a; 研二下学期在深圳某互联网独角兽公司实习过四个月 岗位为测试实习生 求职的方向为互联网-测试岗 24届电子信息硕士 24秋招&#xff08;2023.9-2023.12&#xff09; 其实早在7月份部分互联网公司和大厂已经开始提前批了&#xff0c;因为我不是科班出身&…

Step-DPO 论文——数学大语言模型理解

论文题目&#xff1a;STEP-DPO: STEP-WISE PREFERENCE OPTIMIZATION FOR LONG-CHAIN REASONING OF LLMS 翻译为中文就是&#xff1a;“LLMs长链推理的逐步偏好优化” 论文由港中文贾佳亚团队推出&#xff0c;基于推理步骤的大模型优化策略&#xff0c;能够像老师教学生一样优…

【BUG】已解决:requests.exceptions.ProxyError: HTTPSConnectionPool

已解决&#xff1a;requests.exceptions.ProxyError: HTTPSConnectionPool 目录 已解决&#xff1a;requests.exceptions.ProxyError: HTTPSConnectionPool 【常见模块错误】 原因分析 解决方案 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&am…

OCC 创建方管(拉伸操作)

目录 一、OCC 拉伸操作 二、例子 1、使BRepBuilderAPI_MakeFace 2、使用BRepPrimAPI_MakeRevol 3、垂直路径扫掠 一、OCC 拉伸操作 BRepPrimAPI_MakeSweep Class Reference - Open CASCADE Technology Documentation OCC提供几种图形的构建是由基本图形的旋转&#xff0c;…

使用Python快速比较和替换键值对

问题背景 您需要在多个文件中替换所有特定字符串的实例。例如&#xff0c;您有一个包含 60728 个键值对的映射词典&#xff0c;需要处理多达 50 个文件&#xff0c;每个文件大约有 250000 行&#xff0c;并且需要在每行中替换多个键。 解决方案 方法一&#xff1a;使用正则表…

【区块链 + 智慧政务】山东荣成:区块链政务诚信管理系统 | FISCO BCOS应用案例

2018 年 9 月&#xff0c;荣成市政府与山东观海数据技术有限公司合作&#xff0c;基于 FISCO BCOS 区块链技术推动智慧城市建设&#xff0c; 其中&#xff0c;信用管理是智慧城市核心之一。 荣成市区块链政务诚信管理系统&#xff0c;建设信用信息征集、评价、披露和应用于一体…

CloudCampus的三种部署模式

CloudCampus的三种部署模式 本地部署 客户购买控制器 自己运营 软件永久license sns &#xff0c;将软件补丁、软件升级&#xff08;含升级版本的新特性&#xff09;、远程支持等打包在一起组成SnS年费 msp自建云部署 msp 购买控制器 msp运营 …

美业SaaS门店收银系统怎么管理订单?博弈美业系统App实操|美业系统Java源码

- 打开博弈美业 - 首页点击订单管理 - 选择想查询的相应订单即可 美业门店管理系统Java源码、美业店务系统演示视频请私信

HTTP协议详解:从零开始的Web通信之旅

文章目录 一、引言&#xff1a;Web通信的基石 - HTTP协议二、HTTP请求方法2.1 OPTIONS2.2 HEAD2.3 GET2.4 POST2.5 PUT2.6 DELETE2.7 TRACE2.8 CONNECT2.9 注意 三、HTTP工作原理四、HTTP 请求/响应流程4.1、客户端连接到web服务器4.2、发送HTTP请求4.3、服务器接受请求并返回H…

【C++】学习笔记——红黑树

文章目录 十七、红黑树1.红黑树的概念红黑树的性质 2.红黑树节点的定义3.红黑树的插入4.红黑树的验证5.完整代码结果演示6.红黑树与AVL树的比较 未完待续 十七、红黑树 1.红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的…

XXL-JOB 定时任务在AI大模型中的应用

目录 1. 应用场景 2. 部署 XXL-JOB 3. SpringBoot 集成 XXL-JOB 定时任务代码示例 3.1 添加依赖 3.2 添加配置 3.3 添加执行器到Ioc容器 3.4 添加定时任务 3.5 控制台新增执行器 3.6 控制台添加任务 3.7 控制台开启任务 1. 应用场景 AI 大模型的调用往往是一个高资源…