前端JS特效第33波:jQuery旋转木马焦点图轮播插件PicCarousel

news2024/11/15 22:44:17

jQuery旋转木马焦点图轮播插件PicCarousel,先来看看效果:

部分核心的代码如下:

<!doctype html>
<html>
<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">
<title>jQuery旋转木马焦点图轮播插件PicCarousel</title>

<link rel="stylesheet" href="css/style.css">

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/PicCarousel.js"></script>

</head>
<body><script src="/demos/googlegg.js"></script> 
<div class="container">
<div class="poster-main A_Demo">
	<div class="poster-btn poster-prev-btn"></div>
	<ul class="poster-list">
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
	</ul>
	<div class="poster-btn poster-next-btn"></div>
</div>

<div class="poster-main B_Demo" style="margin-top:100px">
	<div class="poster-btn poster-prev-btn"></div>
	<ul class="poster-list">
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
	</ul>
	<div class="poster-btn poster-next-btn"></div>
</div>

<script>

$(".A_Demo").PicCarousel("init");
$(".B_Demo").PicCarousel({
"width":1000,		
"height":300,		
"posterWidth":520,	
"posterHeight":300,
"scale":0.9,		
"speed":500,	
"autoPlay":true,	
"delay":1000,	
"verticalAlign":"top"	
});

</script>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

全部代码:jQuery旋转木马焦点图轮播插件PicCarousel

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

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

相关文章

Go 初始化一个字典

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

Python量化交易学习——Part12:回归模型的典型应用

回归模型在很多的时候被应用于对股票的基本面数据进行分析&#xff0c;例如经典的CAPM模型、Fama-French三因子模型以及最新的PB_ROE模型等。这些都是已经应用于现实中的金融市场并获得较好收益的经典模型。本章将通过介绍PB_ROE模型&#xff0c;进一步讲解回归分析在实战过程中…

深入探讨【C++容器适配器】:现代编程中的【Stack与Queue】的实现

目录 一、Stack&#xff08;栈&#xff09; 1.1 Stack的介绍 1.2 Stack的使用 1.3 Stack的模拟实现 二、Queue&#xff08;队列&#xff09; 2.1 Queue的介绍 2.2 Queue的使用 2.3 Queue的模拟实现 三、容器适配器 3.1 什么是适配器 3.2 为什么选择deque作为stack和…

【web】-sql注入-login

根据网址提示打开如图&#xff1a; 查看源代码前台并没有过滤限制、扫描后台也没有发现特殊文件。看到标题显示flag is in database&#xff0c;尝试sql注入。 由于post,bp抓包如下&#xff1a; 运行python sqlmap.py -r 1.txt --dump 获取flag 42f4ebc342b6ed4af4aadc1ea75f…

solidity实战练习3——荷兰拍卖

//SPDX-License-Identifier:MIT pragma solidity ^0.8.24; interface IERC721{function transFrom(address _from,address _to,uint nftid) external ; }contract DutchAuction { address payable immutable seller;//卖方uint immutable startTime;//拍卖开始时间uint immut…

Facebook 开源计算机视觉 (CV) 和 增强现实 (AR) 框架 Ocean

Ocean 是一个独立于平台的框架&#xff0c;支持所有主要操作系统&#xff0c;包括 iOS、Android、Quest、macOS、Windows 和 Linux。它旨在彻底改变计算机视觉和混合现实应用程序的开发。 Ocean 主要使用 C 编写&#xff0c;包括计算机视觉、几何、媒体处理、网络和渲染&#x…

git安装使用gitlab

第一步&#xff1a;下载git 第二步&#xff1a;安装 第三步&#xff1a;配置sshkey 第四步&#xff1a;处理两台电脑的sshkey问题 第一步下载git 网址&#xff1a;Git点Downloads根据你的操作系统选择对应的版本&#xff0c;我的是Windows&#xff0c;所以我选择了Windows …

细数「人力资源」的「六宗罪」

细数「人力资源」的「六宗罪」 不要让人力资源成为企业发展的障碍 人力资源的六宗罪: 招聘与配置培训与开发薪酬与绩效请您先「点赞」+「在看」+「收藏」+关注@netkiller,转发给你的朋友,再慢慢看,方便查看往期精彩文章,以防手划找不到,您的支持就是我最大的动力。 人力…

玩转springboot之SpringBoot打成jar包的结构

SpringBoot打成jar包的结构 springboot通常会打成jar包&#xff0c;然后使用java -jar来进行执行&#xff0c;那么这个jar包里的结构是什么样的呢 其中 BOOT-INF 中包含的classes是我们程序中所有的代码编译后的class文件&#xff0c;lib是程序所引用的外部依赖 META-INF 这个…

解答|服务器只能开22端口可以申请IP地址SSL证书吗?

IP地址SSL证书&#xff0c;是一种专门颁发给公网IP地址的SSL证书&#xff0c;而不是常见的基于域名的SSL证书。SSL证书主要用于保障数据在客户端&#xff08;如用户的浏览器&#xff09;和服务器之间传输时的加密性和安全性&#xff0c;以防止数据被截取或篡改。 服务器只能开…

希尔排序——C语言

希尔排序是插入排序的一种更高效的改进版本。希尔排序通过比较相距一定间隔的元素来进行排序&#xff0c;随着算法的进行&#xff0c;这个间隔逐渐减少&#xff0c;直到最后变为1&#xff0c;此时的排序其实就是一次插入排序。 希尔排序和插入排序的区别是希尔排序是插入排序的…

【C++】入门基础(命名空间、缺省参数、函数重载)

目录 一.命名空间&#xff1a;namespace 1.namespace的价值 2.namespace的定义 3.namespace的使用方法 3.1 域解析运算符:: 3.2 using展开 3.3 using域解析运算符 二.输入输出 三.缺省参数 四.函数重载 1.参数类型不同 2.参数个数不同 3.参数顺序不同 一.命名空间&…

员工的离职成本到底有多高?

员工的离职成本到底有多高? 少有公司意识到离职率这个问题,表面上是员工主动提辞的,所以企业常常将离职率归罪于员工。 可以用“铁打的营盘,流水的兵”来概括离职率。 90/00后高频离职原因,企业揣着明白装糊涂 知乎上常常看到关于抱怨90/00后任性离职的问题,我说这是…

【python数据结构精讲】双端队列

通过总结《流畅的Python》等书中的知识&#xff0c;总结Python中常用工具的方法。 deque&#xff0c;学名双端队列。 1. 常用方法 append()&#xff1a;队列尾部添加appendleft()&#xff1a;队首添加pop()&#xff1a;移除队列最后一个元素popleft()&#xff1a;移除队列第一…

聊聊接入Arbitrum的正确姿势

本文首发于公众号&#xff1a;Keegan小钢 前言 我们知道&#xff0c;目前最主流的 Ethereum Layer2 方案中&#xff0c;主要有 Optimistic Rollup 和 ZK Rollup 两大类。而 Optimistic Rollup 的实现方案中&#xff0c;则是 Optimism 和 Arbitrum 最受关注。而我们最近接入了 …

ONLYOFFICE最新8.1版本新功能解析

ONLYOFFICE最新8.1版本新功能解析 书接上文&#xff1a; 深度解析 ONLYOFFICE 协作空间 2.5 版本新功能https://blog.csdn.net/VincentYoung/article/details/139665603?spm1001.2014.3001.5502 讲解了ONLYOFFICE协作空间今年最新升级的2.5版本的新功能&#xff0c;这里继续…

《代理选择与反爬虫策略探究:如何优化网络爬虫效率与稳定性》

代理IP如何选以及常见反爬策略 为什么需要代理&#xff1f; 因为有的网站会封IP&#xff0c;用户如果没有登录&#xff0c;那IP就是身份标识&#xff0c;如果网站发现用户行为异常就非常可能封IP 什么是代理IP 就是让一个人帮你转交请求&#xff0c;帮你转交的人对面不熟&a…

简单的SQL字符型注入

目录 注入类型 判断字段数 确定回显点 查找数据库名 查找数据库表名 查询字段名 获取想要的数据 以sqli-labs靶场上的简单SQL注入为例 注入类型 判断是数字类型还是字符类型 常见的闭合方式 ?id1、?id1"、?id1)、?id1")等&#xff0c;大多都是单引号…

DEBUG:电脑突然无法联网

问题 mqtt启动时候开启了本地代理 解决 关闭本地的代理

生物素标记降钙素Biotin-α-CGRP, rat 中间体

生物素标记降钙素Biotin-α-CGRP, rat 中间体是一种特定的生物化学试剂&#xff0c;主要用于科学研究领域。以下是对该产品的详细介绍&#xff1a; 一、基本信息 产品名称&#xff1a;生物素标记降钙素Biotin-α-CGRP, rat 中间体 英文名称&#xff1a;Biotin-α-CGRP, rat 纯度…